Lazily initialize component JS when using Html.ReactWithInit

Author: dustinsoftware

src/React.AspNet/HtmlHelperExtensions.cs

@@ -135,7 +135,7 @@ public static IHtmlString ReactWithInit<T>(
 				{
 					reactComponent.RenderHtml(writer, clientOnly, exceptionHandler: exceptionHandler);
 					writer.WriteLine();
-					WriteScriptTag(writer, bodyWriter => reactComponent.RenderJavaScript(bodyWriter));
+					WriteScriptTag(writer, bodyWriter => reactComponent.RenderJavaScript(bodyWriter, waitForDOMContentLoad: true));
 				});
 
 			}

src/React.Core/IReactComponent.cs

@@ -56,14 +56,6 @@ public interface IReactComponent
 		/// <returns>HTML</returns>
 		string RenderHtml(bool renderContainerOnly = false, bool renderServerOnly = false, Action<Exception, string, string> exceptionHandler = null, IRenderFunctions renderFunctions = null);
 
-		/// <summary>
-		/// 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>
-		string RenderJavaScript();
-
 		/// <summary>
 		/// Renders the HTML for this component. This will execute the component server-side and
 		/// return the rendered HTML.
@@ -82,6 +74,14 @@ public interface IReactComponent
 		/// server-rendered HTML.
 		/// </summary>
 		/// <returns>JavaScript</returns>
-		void RenderJavaScript(TextWriter writer);
+		string RenderJavaScript();
+
+		/// <summary>
+		/// 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>
+		void RenderJavaScript(TextWriter writer, bool waitForDOMContentLoad);
 	}
 }

src/React.Core/ReactComponent.cs

@@ -233,7 +233,7 @@ public virtual void RenderHtml(TextWriter writer, bool renderContainerOnly = fal
 		/// <returns>JavaScript</returns>
 		public virtual string RenderJavaScript()
 		{
-			return GetStringFromWriter(renderJsWriter => RenderJavaScript(renderJsWriter));
+			return GetStringFromWriter(renderJsWriter => RenderJavaScript(renderJsWriter, waitForDOMContentLoad: false));
 		}
 
 		/// <summary>
@@ -242,15 +242,26 @@ public virtual string RenderJavaScript()
 		/// server-rendered HTML.
 		/// </summary>
 		/// <param name="writer">The <see cref="T:System.IO.TextWriter" /> to which the content is written</param>
+		/// <param name="waitForDOMContentLoad">Delays the component init until the page load event fires. Useful if the component script tags are located after the call to Html.ReactWithInit. </param>
 		/// <returns>JavaScript</returns>
-		public virtual void RenderJavaScript(TextWriter writer)
+		public virtual void RenderJavaScript(TextWriter writer, bool waitForDOMContentLoad)
 		{
+			if (waitForDOMContentLoad)
+			{
+				writer.Write("window.addEventListener('DOMContentLoaded', function() {");
+			}
+
 			writer.Write(
 				!_configuration.UseServerSideRendering || ClientOnly ? "ReactDOM.render(" : "ReactDOM.hydrate(");
 			WriteComponentInitialiser(writer);
 			writer.Write(", document.getElementById(\"");
 			writer.Write(ContainerId);
 			writer.Write("\"))");
+
+			if (waitForDOMContentLoad)
+			{
+				writer.Write("});");
+			}
 		}
 
 		/// <summary>

src/React.Core/ReactEnvironment.cs

@@ -342,7 +342,7 @@ public virtual void GetInitJavaScript(TextWriter writer, bool clientOnly = false
 			{
 				if (!component.ServerOnly)
 				{
-					component.RenderJavaScript(writer);
+					component.RenderJavaScript(writer, waitForDOMContentLoad: true);
 					writer.WriteLine(';');
 				}
 			}

src/React.Router/ReactRouterComponent.cs

@@ -93,13 +93,23 @@ protected override void WriteComponentInitialiser(TextWriter writer)
 		/// Client side React Router does not need context nor explicit path parameter.
 		/// </summary>
 		/// <returns>JavaScript</returns>
-		public override void RenderJavaScript(TextWriter writer)
+		public override void RenderJavaScript(TextWriter writer, bool waitForDOMContentLoad)
 		{
+			if (waitForDOMContentLoad)
+			{
+				writer.Write("window.addEventListener('DOMContentLoaded', function() {");
+			}
+
 			writer.Write("ReactDOM.hydrate(");
 			base.WriteComponentInitialiser(writer);
 			writer.Write(", document.getElementById(\"");
 			writer.Write(ContainerId);
 			writer.Write("\"))");
+
+			if (waitForDOMContentLoad)
+			{
+				writer.Write("});");
+			}
 		}
 	}
 }

tests/React.Tests/Core/ReactComponentTest.cs

@@ -6,6 +6,7 @@
  */
 
 using System;
+using System.IO;
 using JavaScriptEngineSwitcher.Core;
 using Moq;
 using React.Exceptions;
@@ -266,13 +267,36 @@ public void RenderJavaScriptShouldCallRenderComponentWithReactDomRenderWhenSsrDi
 				Props = new {hello = "World"}
 			};
 			var result = component.RenderJavaScript();
-			
+
 			Assert.Equal(
 				@"ReactDOM.render(React.createElement(Foo, {""hello"":""World""}), document.getElementById(""container""))",
 				result
 			);
 		}
 
+		[Fact]
+		public void RenderJavaScriptShouldHandleWaitForContentLoad()
+		{
+			var environment = new Mock<IReactEnvironment>();
+			var config = CreateDefaultConfigMock();
+			config.SetupGet(x => x.UseServerSideRendering).Returns(false);
+
+			var reactIdGenerator = new Mock<IReactIdGenerator>();
+			var component = new ReactComponent(environment.Object, config.Object, reactIdGenerator.Object, "Foo", "container")
+			{
+				ClientOnly = false,
+				Props = new {hello = "World"}
+			};
+			using (var writer = new StringWriter())
+			{
+				component.RenderJavaScript(writer, waitForDOMContentLoad: true);
+				Assert.Equal(
+					@"window.addEventListener('DOMContentLoaded', function() {ReactDOM.render(React.createElement(Foo, {""hello"":""World""}), document.getElementById(""container""))});",
+					writer.ToString()
+				);
+			}
+		}
+
 		[Theory]
 		[InlineData("Foo", true)]
 		[InlineData("Foo.Bar", true)]

tests/React.Tests/Mvc/HtmlHelperExtensionsTests.cs

@@ -38,7 +38,7 @@ public void ReactWithInitShouldReturnHtmlAndScript()
 			component.Setup(x => x.RenderHtml(It.IsAny<TextWriter>(), false, false, null, null))
 				.Callback((TextWriter writer, bool renderContainerOnly, bool renderServerOnly, Action<Exception, string, string> exceptionHandler, IRenderFunctions renderFunctions) => writer.Write("HTML"));
 
-			component.Setup(x => x.RenderJavaScript(It.IsAny<TextWriter>())).Callback((TextWriter writer) => writer.Write("JS"));
+			component.Setup(x => x.RenderJavaScript(It.IsAny<TextWriter>(), It.IsAny<bool>())).Callback((TextWriter writer, bool waitForDOMContentLoad) => writer.Write("JS"));
 
 			var environment = ConfigureMockEnvironment();
 			environment.Setup(x => x.CreateComponent(
@@ -77,7 +77,7 @@ public void ScriptNonceIsReturned()
 			component.Setup(x => x.RenderHtml(It.IsAny<TextWriter>(), false, false, null, null))
 				.Callback((TextWriter writer, bool renderContainerOnly, bool renderServerOnly, Action<Exception, string, string> exceptionHandle, IRenderFunctions renderFunctions) => writer.Write("HTML")).Verifiable();
 
-			component.Setup(x => x.RenderJavaScript(It.IsAny<TextWriter>())).Callback((TextWriter writer) => writer.Write("JS")).Verifiable();
+			component.Setup(x => x.RenderJavaScript(It.IsAny<TextWriter>(), It.IsAny<bool>())).Callback((TextWriter writer, bool waitForDOMContentLoad) => writer.Write("JS")).Verifiable();
 
 			var config = new Mock<IReactSiteConfiguration>();
 
@@ -217,7 +217,7 @@ public void RenderFunctionsCalledNonLazily()
 			fakeRenderFunctions.Setup(x => x.TransformRenderedHtml(It.IsAny<string>())).Returns("HTML");
 
 			component.Setup(x => x.RenderHtml(It.IsAny<TextWriter>(), It.IsAny<bool>(), It.IsAny<bool>(), It.IsAny<Action<Exception, string, string>>(), It.IsAny<IRenderFunctions>()))
-				.Callback((TextWriter writer, bool renderContainerOnly, bool renderServerOnly, Action<Exception, string, string> exceptionHandler, IRenderFunctions renderFunctions) => 
+				.Callback((TextWriter writer, bool renderContainerOnly, bool renderServerOnly, Action<Exception, string, string> exceptionHandler, IRenderFunctions renderFunctions) =>
 				{
 					renderFunctions.PreRender(_ => "one");
 					writer.Write(renderFunctions.TransformRenderedHtml("HTML"));