React.Router ReactDOM.hydrate with ClientOnly reactjs#1140 (reactjs#1142)

* Added UseServerSideRendering and ClientOnly check to ReactRouterComponent

* Small changes

* Use auto-property for ClientOnly

Co-authored-by: Dustin Masters <[email protected]>

Author: JensMeire

src/React.Router/ReactEnvironmentExtensions.cs

@@ -43,6 +43,7 @@ public static ReactRouterComponent CreateRouterComponent<T>(
 			)
 			{
 				Props = props,
+				ClientOnly = clientOnly,
 			};
 
 			return env.CreateComponent(component, clientOnly) as ReactRouterComponent;

src/React.Router/ReactRouterComponent.cs

@@ -102,7 +102,8 @@ public override void RenderJavaScript(TextWriter writer, bool waitForDOMContentL
 				writer.Write("window.addEventListener('DOMContentLoaded', function() {");
 			}
 
-			writer.Write("ReactDOM.hydrate(");
+			writer.Write(
+				!_configuration.UseServerSideRendering || ClientOnly ? "ReactDOM.render(" : "ReactDOM.hydrate(");
 			base.WriteComponentInitialiser(writer);
 			writer.Write(", document.getElementById(\"");
 			writer.Write(ContainerId);

tests/React.Tests/Router/HtmlHelperExtensionsTest.cs

@@ -92,7 +92,8 @@ class ReactRouterMocks
 			public ReactRouterMocks(
 				Mock<IReactSiteConfiguration> conf,
 				Mock<IReactEnvironment> env,
-				Mock<IReactIdGenerator> idGenerator
+				Mock<IReactIdGenerator> idGenerator,
+				bool clientOnly = false
 			)
 			{
 				config = conf;
@@ -126,7 +127,7 @@ public void EngineIsReturnedToPoolAfterRender()
 			var config = ConfigureMockConfiguration();
 			var environment = ConfigureMockEnvironment();
 			var reactIdGenerator = ConfigureReactIdGenerator();
-			var routerMocks = new ReactRouterMocks(config, environment, reactIdGenerator);
+			var routerMocks = new ReactRouterMocks(config, environment, reactIdGenerator, true);
 			var htmlHelperMock = new HtmlHelperMocks();
 
 			environment.Verify(x => x.ReturnEngineToPool(), Times.Never);
@@ -150,7 +151,7 @@ public void ReactWithClientOnlyTrueShouldCallRenderHtmlWithTrue()
 			var htmlHelperMock = new HtmlHelperMocks();
 			var environment = ConfigureMockEnvironment();
 			var reactIdGenerator = ConfigureReactIdGenerator();
-			var routerMocks = new ReactRouterMocks(config, environment, reactIdGenerator);
+			var routerMocks = new ReactRouterMocks(config, environment, reactIdGenerator, true);
 
 			var result = HtmlHelperExtensions.ReactRouter(
 				htmlHelper: htmlHelperMock.htmlHelper.Object,

tests/React.Tests/Router/ReactRouterComponentTest.cs

@@ -8,50 +8,81 @@
 
 using Moq;
 using Xunit;
-using React.Exceptions;
 using React.Router;
-using React.Tests.Core;
 
 namespace React.Tests.Router
 {
 	public class ReactRouterComponentTest
 	{
-		[Fact]
-		public void RenderJavaScriptShouldNotIncludeContextOrPath()
+		[Theory]
+		[InlineData(true, true)]
+		[InlineData(true, false)]
+		[InlineData(false, true)]
+		[InlineData(false, false)]
+		public void RenderJavaScriptShouldNotIncludeContextOrPath(bool clientOnly, bool useServerSideRendering)
 		{
 			var environment = new Mock<IReactEnvironment>();
 			var config = new Mock<IReactSiteConfiguration>();
+			config.Setup(x => x.UseServerSideRendering).Returns(useServerSideRendering);
 			var reactIdGenerator = new Mock<IReactIdGenerator>();
 
 			var component = new ReactRouterComponent(environment.Object, config.Object, reactIdGenerator.Object, "Foo", "container", "/bar")
 			{
-				Props = new { hello = "World" }
+				Props = new { hello = "World" },
+				ClientOnly = clientOnly,
 			};
 			var result = component.RenderJavaScript(false);
 
-			Assert.Equal(
-				@"ReactDOM.hydrate(React.createElement(Foo, {""hello"":""World""}), document.getElementById(""container""))",
-				result
-			);
+			if (clientOnly || !useServerSideRendering)
+			{
+				Assert.Equal(
+					@"ReactDOM.render(React.createElement(Foo, {""hello"":""World""}), document.getElementById(""container""))",
+					result
+				);
+			} 
+			else 
+			{
+				Assert.Equal(
+					@"ReactDOM.hydrate(React.createElement(Foo, {""hello"":""World""}), document.getElementById(""container""))",
+					result
+				);
+			}
+			
 		}
 
-		[Fact]
-		public void RenderJavaScriptShouldHandleWaitForContentLoad()
+		[Theory]
+		[InlineData(true, true)]
+		[InlineData(true, false)]
+		[InlineData(false, true)]
+		[InlineData(false, false)]
+		public void RenderJavaScriptShouldHandleWaitForContentLoad(bool clientOnly, bool useServerSideRendering)
 		{
 			var environment = new Mock<IReactEnvironment>();
 			var config = new Mock<IReactSiteConfiguration>();
+			config.Setup(x => x.UseServerSideRendering).Returns(useServerSideRendering);
 			var reactIdGenerator = new Mock<IReactIdGenerator>();
 
 			var component = new ReactRouterComponent(environment.Object, config.Object, reactIdGenerator.Object, "Foo", "container", "/bar")
 			{
-				Props = new { hello = "World" }
+				Props = new { hello = "World" },
+				ClientOnly = clientOnly
 			};
 			var result = component.RenderJavaScript(true);
 
-			Assert.Equal(
-				@"window.addEventListener('DOMContentLoaded', function() {ReactDOM.hydrate(React.createElement(Foo, {""hello"":""World""}), document.getElementById(""container""))});",
-				result
-			);
+			if (clientOnly || !useServerSideRendering)
+			{
+				Assert.Equal(
+					@"window.addEventListener('DOMContentLoaded', function() {ReactDOM.render(React.createElement(Foo, {""hello"":""World""}), document.getElementById(""container""))});",
+					result
+				);
+			}
+			else 
+			{
+				Assert.Equal(
+					@"window.addEventListener('DOMContentLoaded', function() {ReactDOM.hydrate(React.createElement(Foo, {""hello"":""World""}), document.getElementById(""container""))});",
+					result
+				);
+			}
 		}
 	}
 }