Lazily initialize component JS when using Html.ReactWithInit

This allows Output Caching to be used, in #543

Still needs tests and documentation updates

Author: Dustin Masters

src/React.AspNet/HtmlHelperExtensions.cs

@@ -104,8 +104,10 @@ 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>
 		/// <returns>The component's HTML</returns>
 		public static IHtmlString ReactWithInit<T>(
 			this IHtmlHelper htmlHelper,
@@ -114,8 +116,10 @@ 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
 		)
 		{
 			try
@@ -133,11 +137,11 @@ 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, waitForDOMContentLoad: true));
 				});
-					
+
 			}
 			finally
 			{

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/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);
 	}
 }

src/React.Core/IReactSiteConfiguration.cs

@@ -19,11 +19,11 @@ public interface IReactSiteConfiguration
 		/// <summary>
 		/// Adds a script to the list of scripts that are executed. This should be called for all
 		/// React components and their dependencies. If the script does not have any JSX in it
-		/// (for example, it's built using Webpack or Gulp), use 
+		/// (for example, it's built using Webpack or Gulp), use
 		/// <see cref="AddScriptWithoutTransform"/> instead.
 		/// </summary>
 		/// <param name="filename">
-		/// Name of the file to execute. Should be a server relative path starting with ~ (eg. 
+		/// Name of the file to execute. Should be a server relative path starting with ~ (eg.
 		/// <c>~/Scripts/Awesome.js</c>)
 		/// </param>
 		/// <returns>This configuration, for chaining</returns>
@@ -35,7 +35,7 @@ public interface IReactSiteConfiguration
 		/// more efficient.
 		/// </summary>
 		/// <param name="filename">
-		/// Name of the file to execute. Should be a server relative path starting with ~ (eg. 
+		/// Name of the file to execute. Should be a server relative path starting with ~ (eg.
 		/// <c>~/Scripts/Awesome.js</c>)
 		/// </param>
 		/// <returns>The configuration, for chaining</returns>
@@ -48,15 +48,15 @@ public interface IReactSiteConfiguration
 		IEnumerable<string> Scripts { get; }
 
 		/// <summary>
-		/// Gets a list of all the scripts that have been added to this configuration and do not 
+		/// Gets a list of all the scripts that have been added to this configuration and do not
 		/// require JSX transformation to be run.
 		/// </summary>
-		IEnumerable<string> ScriptsWithoutTransform { get; } 
+		IEnumerable<string> ScriptsWithoutTransform { get; }
 
 		/// <summary>
 		/// Gets or sets whether JavaScript engines should be reused across requests.
 		/// </summary>
-		/// 
+		///
 		bool ReuseJavaScriptEngines { get; set; }
 		/// <summary>
 		/// Sets whether JavaScript engines should be reused across requests.
@@ -79,23 +79,23 @@ public interface IReactSiteConfiguration
 		IReactSiteConfiguration SetJsonSerializerSettings(JsonSerializerSettings settings);
 
 		/// <summary>
-		/// Gets or sets the number of engines to initially start when a pool is created. 
+		/// Gets or sets the number of engines to initially start when a pool is created.
 		/// Defaults to <c>10</c>.
 		/// </summary>
 		int? StartEngines { get; set; }
 		/// <summary>
-		/// Sets the number of engines to initially start when a pool is created. 
+		/// Sets the number of engines to initially start when a pool is created.
 		/// Defaults to <c>10</c>.
 		/// </summary>
 		IReactSiteConfiguration SetStartEngines(int? startEngines);
 
 		/// <summary>
-		/// Gets or sets the maximum number of engines that will be created in the pool. 
+		/// Gets or sets the maximum number of engines that will be created in the pool.
 		/// Defaults to <c>25</c>.
 		/// </summary>
 		int? MaxEngines { get; set; }
 		/// <summary>
-		/// Sets the maximum number of engines that will be created in the pool. 
+		/// Sets the maximum number of engines that will be created in the pool.
 		/// Defaults to <c>25</c>.
 		/// </summary>
 		IReactSiteConfiguration SetMaxEngines(int? maxEngines);
@@ -129,7 +129,7 @@ public interface IReactSiteConfiguration
 		/// </summary>
 		bool LoadReact { get; set; }
 		/// <summary>
-		/// Sets whether the built-in version of React is loaded. If <c>false</c>, you must 
+		/// Sets whether the built-in version of React is loaded. If <c>false</c>, you must
 		/// provide your own version of React.
 		/// </summary>
 		/// <returns>The configuration, for chaining</returns>
@@ -204,13 +204,13 @@ public interface IReactSiteConfiguration
 		IReactSiteConfiguration SetExceptionHandler(Action<Exception, string, string> handler);
 
 		/// <summary>
-		/// A provider that returns a nonce to be used on any script tags on the page. 
+		/// A provider that returns a nonce to be used on any script tags on the page.
 		/// This value must match the nonce used in the Content Security Policy header on the response.
 		/// </summary>
 		Func<string> ScriptNonceProvider { get; set; }
 
 		/// <summary>
-		/// Sets a provider that returns a nonce to be used on any script tags on the page. 
+		/// Sets a provider that returns a nonce to be used on any script tags on the page.
 		/// This value must match the nonce used in the Content Security Policy header on the response.
 		/// </summary>
 		/// <param name="provider"></param>

src/React.Core/ReactComponent.cs

@@ -140,7 +140,12 @@ public virtual string RenderHtml(bool renderContainerOnly = false, bool renderSe
 		/// <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>
 		/// <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,24 +238,35 @@ 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>
-		/// 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>
-		/// <param name="writer">The <see cref="T:System.IO.TextWriter" /> to which the content is written</param>
-		/// <returns>JavaScript</returns>
-		public virtual void RenderJavaScript(TextWriter writer)
+        /// <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>
+        /// <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, 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.Core/ReactSiteConfiguration.cs

@@ -44,7 +44,7 @@ public ReactSiteConfiguration()
 			};
 			UseDebugReact = false;
 			UseServerSideRendering = true;
-			ExceptionHandler = (Exception ex, string ComponentName, string ContainerId) => 
+			ExceptionHandler = (Exception ex, string ComponentName, string ContainerId) =>
 				throw new ReactServerRenderingException(string.Format(
 					"Error while rendering \"{0}\" to \"{2}\": {1}",
 					ComponentName,
@@ -54,7 +54,7 @@ public ReactSiteConfiguration()
 		}
 
 		/// <summary>
-		/// All the scripts that have been added to this configuration and require JSX 
+		/// All the scripts that have been added to this configuration and require JSX
 		/// transformation to be run.
 		/// </summary>
 		private readonly IList<string> _scriptFiles = new List<string>();
@@ -67,11 +67,11 @@ public ReactSiteConfiguration()
 		/// <summary>
 		/// Adds a script to the list of scripts that are executed. This should be called for all
 		/// React components and their dependencies. If the script does not have any JSX in it
-		/// (for example, it's built using Webpack or Gulp), use 
+		/// (for example, it's built using Webpack or Gulp), use
 		/// <see cref="AddScriptWithoutTransform"/> instead.
 		/// </summary>
 		/// <param name="filename">
-		/// Name of the file to execute. Should be a server relative path starting with ~ (eg. 
+		/// Name of the file to execute. Should be a server relative path starting with ~ (eg.
 		/// <c>~/Scripts/Awesome.js</c>)
 		/// </param>
 		/// <returns>This configuration, for chaining</returns>
@@ -87,7 +87,7 @@ public IReactSiteConfiguration AddScript(string filename)
 		/// more efficient.
 		/// </summary>
 		/// <param name="filename">
-		/// Name of the file to execute. Should be a server relative path starting with ~ (eg. 
+		/// Name of the file to execute. Should be a server relative path starting with ~ (eg.
 		/// <c>~/Scripts/Awesome.js</c>)
 		/// </param>
 		/// <returns>The configuration, for chaining</returns>
@@ -169,12 +169,12 @@ public IReactSiteConfiguration SetReuseJavaScriptEngines(bool value)
 		}
 
 		/// <summary>
-		/// Gets or sets the number of engines to initially start when a pool is created. 
+		/// Gets or sets the number of engines to initially start when a pool is created.
 		/// Defaults to <c>10</c>.
 		/// </summary>
 		public int? StartEngines { get; set; }
 		/// <summary>
-		/// Sets the number of engines to initially start when a pool is created. 
+		/// Sets the number of engines to initially start when a pool is created.
 		/// Defaults to <c>10</c>.
 		/// </summary>
 		public IReactSiteConfiguration SetStartEngines(int? startEngines)
@@ -184,12 +184,12 @@ public IReactSiteConfiguration SetStartEngines(int? startEngines)
 		}
 
 		/// <summary>
-		/// Gets or sets the maximum number of engines that will be created in the pool. 
+		/// Gets or sets the maximum number of engines that will be created in the pool.
 		/// Defaults to <c>25</c>.
 		/// </summary>
 		public int? MaxEngines { get; set; }
 		/// <summary>
-		/// Sets the maximum number of engines that will be created in the pool. 
+		/// Sets the maximum number of engines that will be created in the pool.
 		/// Defaults to <c>25</c>.
 		/// </summary>
 		public IReactSiteConfiguration SetMaxEngines(int? maxEngines)
@@ -237,7 +237,7 @@ public IReactSiteConfiguration SetAllowJavaScriptPrecompilation(bool allowJavaSc
 		public bool LoadReact { get; set; }
 
 		/// <summary>
-		/// Sets whether the built-in version of React is loaded. If <c>false</c>, you must 
+		/// Sets whether the built-in version of React is loaded. If <c>false</c>, you must
 		/// provide your own version of React.
 		/// </summary>
 		/// <returns>The configuration, for chaining</returns>
@@ -332,7 +332,7 @@ public IReactSiteConfiguration DisableServerSideRendering()
 		public Action<Exception, string, string> ExceptionHandler { get; set; }
 
 		/// <summary>
-		/// 
+		///
 		/// </summary>
 		/// <param name="handler"></param>
 		/// <returns></returns>
@@ -343,13 +343,13 @@ public IReactSiteConfiguration SetExceptionHandler(Action<Exception, string, str
 		}
 
 		/// <summary>
-		/// A provider that returns a nonce to be used on any script tags on the page. 
+		/// A provider that returns a nonce to be used on any script tags on the page.
 		/// This value must match the nonce used in the Content Security Policy header on the response.
 		/// </summary>
 		public Func<string> ScriptNonceProvider { get; set; }
 
 		/// <summary>
-		/// Sets a provider that returns a nonce to be used on any script tags on the page. 
+		/// Sets a provider that returns a nonce to be used on any script tags on the page.
 		/// This value must match the nonce used in the Content Security Policy header on the response.
 		/// </summary>
 		/// <param name="provider"></param>

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("});");
+			}
 		}
 	}
 }