Lazily initialize component JS when using Html.ReactWithInit

This allows Output Caching to be used, in #543

Still needs tests and documentation updates

Author: dustinsoftware

Diff for: src/React.AspNet/HtmlHelperExtensions.cs

@@ -104,8 +104,11 @@ public static IHtmlString React<T>(
 		/// <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="serverOnly">Skip rendering React specific data-attributes, container and client-side initialisation during server side rendering. Defaults to <c>false</c></param>
 		/// <param name="containerClass">HTML class(es) to set on the container tag</param>
 		/// <param name="exceptionHandler">A custom exception handler that will be called if a component throws during a render. Args: (Exception ex, string componentName, string containerId)</param>
+		/// <param name="renderFunctions"></param>
+		/// <param name="renderImmediately">Renders immediately, instead after DOMContentLoaded</param>
 		/// <returns>The component's HTML</returns>
 		public static IHtmlString ReactWithInit<T>(
 			this IHtmlHelper htmlHelper,
@@ -114,8 +117,11 @@ public static IHtmlString ReactWithInit<T>(
 			string htmlTag = null,
 			string containerId = null,
 			bool clientOnly = false,
+			bool serverOnly = false,
 			string containerClass = null,
-			Action<Exception, string, string> exceptionHandler = null
+			Action<Exception, string, string> exceptionHandler = null,
+			IRenderFunctions renderFunctions = null,
+			bool renderImmediately = false
 		)
 		{
 			try
@@ -133,9 +139,9 @@ public static IHtmlString ReactWithInit<T>(
 
 				return RenderToString(writer =>
 				{
-					reactComponent.RenderHtml(writer, clientOnly, exceptionHandler: exceptionHandler);
+					reactComponent.RenderHtml(writer, clientOnly, serverOnly, exceptionHandler: exceptionHandler, renderFunctions);
 					writer.WriteLine();
-					WriteScriptTag(writer, bodyWriter => reactComponent.RenderJavaScript(bodyWriter));
+					WriteScriptTag(writer, bodyWriter => reactComponent.RenderJavaScript(bodyWriter, renderImmediately));
 				});
 
 			}

Diff for: 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 renderImmediately = false);
 	}
 }

Diff for: src/React.Core/IReactEnvironment.cs

@@ -100,6 +100,15 @@ public interface IReactEnvironment
 		/// <returns>JavaScript for all components</returns>
 		string GetInitJavaScript(bool clientOnly = false);
 
+		/// <summary>
+		/// Renders the JavaScript required to initialise all components client-side. This will 
+		/// attach event handlers to the server-rendered HTML.
+		/// </summary>
+		/// <param name="writer">The <see cref="T:System.IO.TextWriter" /> to which the content is written</param>
+		/// <param name="clientOnly">True if server-side rendering will be bypassed. Defaults to false.</param>
+		/// <returns>JavaScript for all components</returns>
+		void GetInitJavaScript(TextWriter writer, bool clientOnly = false);
+
 		/// <summary>
 		/// Gets the JSX Transformer for this environment.
 		/// </summary>
@@ -114,14 +123,5 @@ public interface IReactEnvironment
 		/// Gets the site-wide configuration.
 		/// </summary>
 		IReactSiteConfiguration Configuration { get; }
-
-		/// <summary>
-		/// Renders the JavaScript required to initialise all components client-side. This will 
-		/// attach event handlers to the server-rendered HTML.
-		/// </summary>
-		/// <param name="writer">The <see cref="T:System.IO.TextWriter" /> to which the content is written</param>
-		/// <param name="clientOnly">True if server-side rendering will be bypassed. Defaults to false.</param>
-		/// <returns>JavaScript for all components</returns>
-		void GetInitJavaScript(TextWriter writer, bool clientOnly = false);
 	}
 }

Diff for: src/React.Core/ReactComponent.cs

@@ -139,8 +139,14 @@ public virtual string RenderHtml(bool renderContainerOnly = false, bool renderSe
 		/// <param name="renderServerOnly">Only renders the common HTML mark up and not any React specific data attributes. Used for server-side only rendering.</param>
 		/// <param name="exceptionHandler">A custom exception handler that will be called if a component throws during a render. Args: (Exception ex, string componentName, string containerId)</param>
 		/// <param name="renderFunctions">Functions to call during component render</param>
+		/// <param name="renderImmediately"></param>
 		/// <returns>HTML</returns>
-		public virtual void RenderHtml(TextWriter writer, bool renderContainerOnly = false, bool renderServerOnly = false, Action<Exception, string, string> exceptionHandler = null, IRenderFunctions renderFunctions = null)
+		public virtual void RenderHtml(
+			TextWriter writer, 
+			bool renderContainerOnly = false, 
+			bool renderServerOnly = false, 
+			Action<Exception, string, string> exceptionHandler = null, 
+			IRenderFunctions renderFunctions = null)
 		{
 			if (!_configuration.UseServerSideRendering)
 			{
@@ -233,7 +239,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, renderImmediately: true));
 		}
 
 		/// <summary>
@@ -242,15 +248,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="renderImmediately"></param>
 		/// <returns>JavaScript</returns>
-		public virtual void RenderJavaScript(TextWriter writer)
+		public virtual void RenderJavaScript(TextWriter writer, bool renderImmediately)
 		{
+			if (!renderImmediately)
+			{
+				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 (!renderImmediately)
+			{
+				writer.Write("});");
+			}
 		}
 
 		/// <summary>

Diff for: 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, renderImmediately: true);
 					writer.WriteLine(';');
 				}
 			}

Diff for: 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 renderImmediately)
 		{
+			if (!renderImmediately)
+			{
+				writer.Write("window.addEventListener('DOMContentLoaded', function() {");
+			}
+
 			writer.Write("ReactDOM.hydrate(");
 			base.WriteComponentInitialiser(writer);
 			writer.Write(", document.getElementById(\"");
 			writer.Write(ContainerId);
 			writer.Write("\"))");
+
+			if (!renderImmediately)
+			{
+				writer.Write("});");
+			}
 		}
 	}
 }

Diff for: 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) => 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) => writer.Write("JS")).Verifiable();
 
 			var config = new Mock<IReactSiteConfiguration>();