Merge branch 'master' of https://github.com/reactjs/React.NET

Author: Daniel15

site/jekyll/guides/server-side-rendering.md

@@ -72,3 +72,26 @@ meaning your initial render will be super fast.
 
 For a more in-depth example, take a look at the included sample application
 (**React.Samples.Mvc4**).
+
+5 - Server-side only rendering
+
+If there is no need to have a React application client side and you just want to use the server side rendering but without the React specific data attributes call `Html.React` and pass serverOnly parameter as true.
+
+```csharp
+@Html.React("HelloWorld", new
+{
+	name = "Daniel"
+}
+serverOnly:true)
+```
+
+And the Html mark up will look like the one following which is a lot cleaner. In this case there is no need to load the React script or call the `Html.ReactInitJavaScript()` method.
+
+```html
+<div id="react1">
+	<div>
+		<span>Hello </span>
+		<span>Daniel</span>
+	</div>
+</div>
+```

src/React.AspNet/HtmlHelperExtensions.cs

@@ -3,7 +3,7 @@
  *  All rights reserved.
  *
  *  This source code is licensed under the BSD-style license found in the
- *  LICENSE file in the root directory of this source tree. An additional grant 
+ *  LICENSE file in the root directory of this source tree. An additional grant
  *  of patent rights can be found in the PATENTS file in the same directory.
  */
 
@@ -66,23 +66,25 @@ 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 <c>false</c></param>
+		/// <param name="clientOnly">Skip rendering server-side and only output client-side initialisation code. Defaults to <c>false</c></param>
+		/// <param name="serverOnly">Skip rendering React specific data-attributes during server side rendering. Defaults to <c>false</c></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, 
-			bool clientOnly = false
+			string containerId = null,
+			bool clientOnly = false,
+			bool serverOnly = false
 		)
 		{
 			var reactComponent = Environment.CreateComponent(componentName, props, containerId);
 			if (!string.IsNullOrEmpty(htmlTag))
 			{
 				reactComponent.ContainerTag = htmlTag;
 			}
-			var result = reactComponent.RenderHtml(clientOnly);
+			var result = reactComponent.RenderHtml(clientOnly, serverOnly);
 			return new HtmlString(result);
 		}
 
@@ -97,15 +99,15 @@ 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 <c>false</c></param>
+		/// <param name="clientOnly">Skip rendering server-side and only output client-side initialisation code. Defaults to <c>false</c></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, 
-			bool clientOnly = false
+			string containerId = null,
+            bool clientOnly = false
 		)
 		{
 			var reactComponent = Environment.CreateComponent(componentName, props, containerId);
@@ -122,7 +124,7 @@ public static IHtmlString ReactWithInit<T>(
 		}
 
 		/// <summary>
-		/// Renders the JavaScript required to initialise all components client-side. This will 
+		/// Renders the JavaScript required to initialise all components client-side. This will
 		/// attach event handlers to the server-rendered HTML.
 		/// </summary>
 		/// <returns>JavaScript for all components</returns>

src/React.Core/IReactComponent.cs

@@ -3,7 +3,7 @@
  *  All rights reserved.
  *
  *  This source code is licensed under the BSD-style license found in the
- *  LICENSE file in the root directory of this source tree. An additional grant 
+ *  LICENSE file in the root directory of this source tree. An additional grant
  *  of patent rights can be found in the PATENTS file in the same directory.
  */
 
@@ -39,12 +39,13 @@ public interface IReactComponent
 		/// return the rendered HTML.
 		/// </summary>
 		/// <param name="renderContainerOnly">Only renders component container. Used for client-side only rendering.</param>
+		/// <param name="renderServerOnly">Only renders the common HTML mark up and not any React specific data attributes. Used for server-side only rendering.</param>
 		/// <returns>HTML</returns>
-		string RenderHtml(bool renderContainerOnly = false);
+		string RenderHtml(bool renderContainerOnly = false, bool renderServerOnly = false);
 
 		/// <summary>
-		/// Renders the JavaScript required to initialise this component client-side. This will 
-		/// initialise the React component, which includes attach event handlers to the 
+		/// Renders the JavaScript required to initialise this component client-side. This will
+		/// initialise the React component, which includes attach event handlers to the
 		/// server-rendered HTML.
 		/// </summary>
 		/// <returns>JavaScript</returns>

src/React.Core/ReactComponent.cs

@@ -3,7 +3,7 @@
  *  All rights reserved.
  *
  *  This source code is licensed under the BSD-style license found in the
- *  LICENSE file in the root directory of this source tree. An additional grant 
+ *  LICENSE file in the root directory of this source tree. An additional grant
  *  of patent rights can be found in the PATENTS file in the same directory.
  */
 
@@ -79,18 +79,20 @@ public ReactComponent(IReactEnvironment environment, IReactSiteConfiguration con
 		/// return the rendered HTML.
 		/// </summary>
 		/// <param name="renderContainerOnly">Only renders component container. Used for client-side only rendering.</param>
+		/// <param name="renderServerOnly">Only renders the common HTML mark up and not any React specific data attributes. Used for server-side only rendering.</param>
 		/// <returns>HTML</returns>
-		public virtual string RenderHtml(bool renderContainerOnly = false)
+		public virtual string RenderHtml(bool renderContainerOnly = false, bool renderServerOnly = false)
 		{
 			EnsureComponentExists();
 			try
-			{ 
-				var html = string.Empty; 
-				if (!renderContainerOnly) 
-				{ 
-					html = _environment.Execute<string>( 
-						string.Format("React.renderToString({0})", GetComponentInitialiser())
-					);
+			{
+				var html = string.Empty;
+				if (!renderContainerOnly)
+				{
+					var reactRenderCommand = renderServerOnly
+						? string.Format("React.renderToStaticMarkup({0})", GetComponentInitialiser())
+						: string.Format("React.renderToString({0})", GetComponentInitialiser());
+					html = _environment.Execute<string>(reactRenderCommand);
 				}
 				return string.Format(
 					"<{2} id=\"{0}\">{1}</{2}>",
@@ -111,8 +113,8 @@ public virtual string RenderHtml(bool renderContainerOnly = false)
 		}
 
 		/// <summary>
-		/// Renders the JavaScript required to initialise this component client-side. This will 
-		/// initialise the React component, which includes attach event handlers to the 
+		/// Renders the JavaScript required to initialise this component client-side. This will
+		/// initialise the React component, which includes attach event handlers to the
 		/// server-rendered HTML.
 		/// </summary>
 		/// <returns>JavaScript</returns>

src/React.Tests/Core/ReactComponentTest.cs

@@ -3,7 +3,7 @@
  *  All rights reserved.
  *
  *  This source code is licensed under the BSD-style license found in the
- *  LICENSE file in the root directory of this source tree. An additional grant 
+ *  LICENSE file in the root directory of this source tree. An additional grant
  *  of patent rights can be found in the PATENTS file in the same directory.
  */
 
@@ -64,7 +64,7 @@ public void RenderHtmlShouldWrapComponentInDiv()
 		}
 
 		[Test]
-		public void RenderHtmlShouldNotRenderComponentHTML()
+		public void RenderHtmlShouldNotRenderComponentHtml()
 		{
 			var environment = new Mock<IReactEnvironment>();
 			environment.Setup(x => x.Execute<bool>("typeof Foo !== 'undefined'")).Returns(true);
@@ -82,6 +82,22 @@ public void RenderHtmlShouldNotRenderComponentHTML()
 			environment.Verify(x => x.Execute(It.IsAny<string>()), Times.Never);
 		}
 
+		[Test]
+		public void RenderHtmlShouldNotRenderClientSideAttributes()
+		{
+			var environment = new Mock<IReactEnvironment>();
+			environment.Setup(x => x.Execute<bool>("typeof Foo !== 'undefined'")).Returns(true);
+			var config = new Mock<IReactSiteConfiguration>();
+
+			var component = new ReactComponent(environment.Object, config.Object, "Foo", "container")
+			{
+				Props = new { hello = "World" }
+			};
+			component.RenderHtml(renderServerOnly: true);
+
+			environment.Verify(x => x.Execute<string>(@"React.renderToStaticMarkup(React.createElement(Foo, {""hello"":""World""}))"));
+		}
+
 		[Test]
 		public void RenderHtmlShouldWrapComponentInCustomElement()
 		{

src/React.Tests/Mvc/HtmlHelperExtensionsTests.cs

@@ -3,7 +3,7 @@
  *  All rights reserved.
  *
  *  This source code is licensed under the BSD-style license found in the
- *  LICENSE file in the root directory of this source tree. An additional grant 
+ *  LICENSE file in the root directory of this source tree. An additional grant
  *  of patent rights can be found in the PATENTS file in the same directory.
  */
 
@@ -19,7 +19,7 @@ class HtmlHelperExtensionsTests
 	{
 		/// <summary>
 		/// Creates a mock <see cref="IReactEnvironment"/> and registers it with the IoC container
-		/// This is only required because <see cref="HtmlHelperExtensions"/> can not be 
+		/// This is only required because <see cref="HtmlHelperExtensions"/> can not be
 		/// injected :(
 		/// </summary>
 		private Mock<IReactEnvironment> ConfigureMockEnvironment()
@@ -33,7 +33,7 @@ private Mock<IReactEnvironment> ConfigureMockEnvironment()
 		public void ReactWithInitShouldReturnHtmlAndScript()
 		{
 			var component = new Mock<IReactComponent>();
-			component.Setup(x => x.RenderHtml(false)).Returns("HTML");
+			component.Setup(x => x.RenderHtml(false, false)).Returns("HTML");
 			component.Setup(x => x.RenderJavaScript()).Returns("JS");
 			var environment = ConfigureMockEnvironment();
 			environment.Setup(x => x.CreateComponent(
@@ -44,12 +44,12 @@ public void ReactWithInitShouldReturnHtmlAndScript()
 
 			var result = HtmlHelperExtensions.ReactWithInit(
 				htmlHelper: null,
-				componentName: "ComponentName", 
-				props: new { }, 
+				componentName: "ComponentName",
+				props: new { },
 				htmlTag: "span"
 			);
 			Assert.AreEqual(
-				"HTML" + System.Environment.NewLine + "<script>JS</script>", 
+				"HTML" + System.Environment.NewLine + "<script>JS</script>",
 				result.ToString()
 			);
 
@@ -59,7 +59,7 @@ public void ReactWithInitShouldReturnHtmlAndScript()
 		public void ReactWithClientOnlyTrueShouldCallRenderHtmlWithTrue()
 		{
 			var component = new Mock<IReactComponent>();
-			component.Setup(x => x.RenderHtml(true)).Returns("HTML");
+			component.Setup(x => x.RenderHtml(true, true)).Returns("HTML");
 			var environment = ConfigureMockEnvironment();
 			environment.Setup(x => x.CreateComponent(
 				"ComponentName",
@@ -69,12 +69,35 @@ public void ReactWithClientOnlyTrueShouldCallRenderHtmlWithTrue()
 
 			var result = HtmlHelperExtensions.React(
 				htmlHelper: null,
-				componentName: "ComponentName", 
-				props: new { }, 
+				componentName: "ComponentName",
+				props: new { },
 				htmlTag: "span",
-				clientOnly: true
+				clientOnly: true,
+				serverOnly: true
 			);
-			component.Verify(x => x.RenderHtml(It.Is<bool>(y => y == true)), Times.Once);
+			component.Verify(x => x.RenderHtml(It.Is<bool>(y => y == true), It.Is<bool>(z => z == true)), Times.Once);
+		}
+
+		[Test]
+		public void ReactWithServerOnlyTrueShouldCallRenderHtmlWithTrue() {
+			var component = new Mock<IReactComponent>();
+			component.Setup(x => x.RenderHtml(true, 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,
+				serverOnly: true
+			);
+			component.Verify(x => x.RenderHtml(It.Is<bool>(y => y == true), It.Is<bool>(z => z == true)), Times.Once);
 		}
 	}
 }