Add server-render support for CSS-in-JS (reactjs#589)

* Add callbacks for running custom Javascript during component render

This allows UI libraries like styled-components to work without any extra code in this project

See also reactjs#487 reactjs#538

* Add babel integration test

* Add demo using styled-components

* Create abstraction for chaining pre, during, and post render callbacks

* Add dummy comments to fix build (address these later)

* Remove obsolete method reference

* Fix tests

* Cleanup some code around RenderFunctions

* Expose string property instead of closed-over func with side effects

* Fix regression in TransformRender

* Add render functions tests

* Update sample

This still needs to be better organized..

* Fix filename

* Fix build

* Update xml comments

Author: dustinsoftware

src/React.AspNet/HtmlHelperExtensions.cs

@@ -53,6 +53,7 @@ private static IReactEnvironment Environment
 		/// <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">Functions to call during component render</param>
 		/// <returns>The component's HTML</returns>
 		public static IHtmlString React<T>(
 			this IHtmlHelper htmlHelper,
@@ -63,7 +64,8 @@ public static IHtmlString React<T>(
 			bool clientOnly = false,
 			bool serverOnly = false,
 			string containerClass = null,
-			Action<Exception, string, string> exceptionHandler = null
+			Action<Exception, string, string> exceptionHandler = null,
+			RenderFunctions renderFunctions = null
 		)
 		{
 			return new ActionHtmlString(writer =>
@@ -81,7 +83,7 @@ public static IHtmlString React<T>(
 						reactComponent.ContainerClass = containerClass;
 					}
 
-					reactComponent.RenderHtml(writer, clientOnly, serverOnly, exceptionHandler);
+					reactComponent.RenderHtml(writer, clientOnly, serverOnly, exceptionHandler, renderFunctions);
 				}
 				finally
 				{

src/React.Core/IReactComponent.cs

@@ -54,8 +54,9 @@ public interface IReactComponent
 		/// <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>
 		/// <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>
-		string RenderHtml(bool renderContainerOnly = false, bool renderServerOnly = false, Action<Exception, string, string> exceptionHandler = null);
+		string RenderHtml(bool renderContainerOnly = false, bool renderServerOnly = false, Action<Exception, string, string> exceptionHandler = null, RenderFunctions renderFunctions = null);
 
 		/// <summary>
 		/// Renders the JavaScript required to initialise this component client-side. This will
@@ -73,8 +74,9 @@ public interface IReactComponent
 		/// <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>
 		/// <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>
-		void RenderHtml(TextWriter writer, bool renderContainerOnly = false, bool renderServerOnly = false, Action<Exception, string, string> exceptionHandler = null);
+		void RenderHtml(TextWriter writer, bool renderContainerOnly = false, bool renderServerOnly = false, Action<Exception, string, string> exceptionHandler = null, RenderFunctions renderFunctions = null);
 
 		/// <summary>
 		/// Renders the JavaScript required to initialise this component client-side. This will

src/React.Core/ReactComponent.cs

@@ -125,14 +125,11 @@ public ReactComponent(IReactEnvironment environment, IReactSiteConfiguration con
 		/// <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>
 		/// <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 string RenderHtml(bool renderContainerOnly = false, bool renderServerOnly = false, Action<Exception, string, string> exceptionHandler = null)
+		public virtual string RenderHtml(bool renderContainerOnly = false, bool renderServerOnly = false, Action<Exception, string, string> exceptionHandler = null, RenderFunctions renderFunctions = null)
 		{
-			using (var writer = new StringWriter())
-			{
-				RenderHtml(writer, renderContainerOnly, renderServerOnly, exceptionHandler);
-				return writer.ToString();
-			}
+			return GetStringFromWriter(renderHtmlWriter => RenderHtml(renderHtmlWriter, renderContainerOnly, renderServerOnly, exceptionHandler, renderFunctions));
 		}
 
 		/// <summary>
@@ -143,8 +140,9 @@ public virtual string RenderHtml(bool renderContainerOnly = false, bool renderSe
 		/// <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>
 		/// <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)
+		public virtual void RenderHtml(TextWriter writer, bool renderContainerOnly = false, bool renderServerOnly = false, Action<Exception, string, string> exceptionHandler = null, RenderFunctions renderFunctions = null)
 		{
 			if (!_configuration.UseServerSideRendering)
 			{
@@ -172,11 +170,22 @@ public virtual void RenderHtml(TextWriter writer, bool renderContainerOnly = fal
 				try
 				{
 					stringWriter.Write(renderServerOnly ? "ReactDOMServer.renderToStaticMarkup(" : "ReactDOMServer.renderToString(");
-					WriteComponentInitialiser(stringWriter);
+					if (renderFunctions != null)
+					{
+						stringWriter.Write(renderFunctions.TransformRender(GetStringFromWriter(componentInitWriter => WriteComponentInitialiser(componentInitWriter))));
+					}
+					else
+					{
+						WriteComponentInitialiser(stringWriter);
+					}
 					stringWriter.Write(')');
 
+					renderFunctions?.PreRender(x => _environment.Execute<string>(x));
+
 					html = _environment.Execute<string>(stringWriter.ToString());
 
+					renderFunctions?.PostRender(x => _environment.Execute<string>(x));
+
 					if (renderServerOnly)
 					{
 						writer.Write(html);
@@ -221,11 +230,7 @@ public virtual void RenderHtml(TextWriter writer, bool renderContainerOnly = fal
 		/// <returns>JavaScript</returns>
 		public virtual string RenderJavaScript()
 		{
-			using (var writer = new StringWriter())
-			{
-				RenderJavaScript(writer);
-				return writer.ToString();
-			}
+			return GetStringFromWriter(renderJsWriter => RenderJavaScript(renderJsWriter));
 		}
 
 		/// <summary>
@@ -289,5 +294,14 @@ internal static void EnsureComponentNameValid(string componentName)
 				throw new ReactInvalidComponentException($"Invalid component name '{componentName}'");
 			}
 		}
+
+		private string GetStringFromWriter(Action<TextWriter> fnWithTextWriter)
+		{
+			using (var textWriter = new StringWriter())
+			{
+				fnWithTextWriter(textWriter);
+				return textWriter.ToString();
+			}
+		}
 	}
 }

src/React.Core/RenderFunctions.cs

@@ -0,0 +1,91 @@
+using System;
+
+namespace React
+{
+	/// <summary>
+	/// Functions to execute during a render request.
+	/// These functions will share the same Javascript context, so state can be passed around via variables.
+	/// </summary>
+	public abstract class RenderFunctions
+	{
+		private readonly RenderFunctions m_renderFunctions;
+
+		/// <summary>
+		/// Constructor. Supports chained calls to multiple render functions by passing in a set of functions that should be called next.
+		/// The functions within the provided RenderFunctions will be called *after* this instance's.
+		/// Supports null as an argument.
+		/// </summary>
+		/// <param name="renderFunctions">The chained render functions to call</param>
+		protected RenderFunctions(RenderFunctions renderFunctions)
+		{
+			m_renderFunctions = renderFunctions;
+		}
+
+		/// <summary>
+		/// Implementation of PreRender
+		/// </summary>
+		/// <param name="executeJs"></param>
+		protected virtual void PreRenderCore(Func<string, string> executeJs)
+		{
+		}
+
+		/// <summary>
+		/// Implementation of TransformRender
+		/// </summary>
+		/// <param name="componentToRender"></param>
+		/// <returns></returns>
+		protected virtual string TransformRenderCore(string componentToRender)
+		{
+			return componentToRender;
+		}
+
+		/// <summary>
+		/// Implementation of PostRender
+		/// </summary>
+		/// <param name="executeJs"></param>
+		protected virtual void PostRenderCore(Func<string, string> executeJs)
+		{
+		}
+
+		/// <summary>
+		/// Executes before component render.
+		/// It takes a func that accepts a Javascript code expression to evaluate, which returns the result of the expression.
+		/// This is useful for setting up variables that will be referenced after the render completes.
+		/// <param name="executeJs">The func to execute</param>
+		/// </summary>
+		public virtual void PreRender(Func<string, string> executeJs)
+		{
+			PreRenderCore(executeJs);
+			m_renderFunctions?.PreRender(executeJs);
+		}
+
+
+		/// <summary>
+		/// Transforms the React.createElement expression.
+		/// This is useful for libraries like styled components which require wrapping the root component
+		/// inside a helper to generate a stylesheet.
+		/// Example transform: React.createElement(Foo, ...) => wrapComponent(React.createElement(Foo, ...))
+		/// </summary>
+		/// <param name="componentToRender">The Javascript expression to wrap</param>
+		/// <returns>A wrapped expression</returns>
+		public string TransformRender(string componentToRender)
+		{
+			return m_renderFunctions == null
+				? TransformRenderCore(componentToRender)
+				: m_renderFunctions.TransformRender(TransformRenderCore(componentToRender));
+		}
+
+
+		/// <summary>
+		/// Executes after component render.
+		/// It takes a func that accepts a Javascript code expression to evaluate, which returns the result of the expression.
+		/// This is useful for reading computed state, such as generated stylesheets or a router redirect result.
+		/// </summary>
+		/// <param name="executeJs">The func to execute</param>
+		public void PostRender(Func<string, string> executeJs)
+		{
+			PostRenderCore(executeJs);
+			m_renderFunctions?.PostRender(executeJs);
+		}
+	}
+}

src/React.Core/StyledComponentsFunctions.cs

@@ -0,0 +1,54 @@
+using System;
+
+namespace React
+{
+	/// <summary>
+	/// Render functions for styled components
+	/// </summary>
+	public class StyledComponentsFunctions : RenderFunctions
+	{
+		/// <summary>
+		/// Constructor. Supports chained calls to multiple render functions by passing in a set of functions that should be called next.
+		/// The functions within the provided RenderFunctions will be called *after* this instance's.
+		/// Supports null as an argument.
+		/// </summary>
+		/// <param name="renderFunctions">The chained render functions to call</param>
+		public StyledComponentsFunctions(RenderFunctions renderFunctions = null)
+			: base(renderFunctions)
+		{
+		}
+		
+		/// <summary>
+		/// HTML style tag containing the rendered styles
+		/// </summary>
+		public string RenderedStyles { get; private set; }
+
+		/// <summary>
+		/// Implementation of PreRender
+		/// </summary>
+		/// <param name="executeJs"></param>
+		protected override void PreRenderCore(Func<string, string> executeJs)
+		{
+			executeJs("var serverStyleSheet = new Styled.ServerStyleSheet();");
+		}
+
+		/// <summary>
+		/// Implementation of TransformRender
+		/// </summary>
+		/// <param name="componentToRender"></param>
+		/// <returns></returns>
+		protected override string TransformRenderCore(string componentToRender)
+		{
+			return ($"serverStyleSheet.collectStyles({componentToRender})");
+		}
+
+		/// <summary>
+		/// Implementation of PostRender
+		/// </summary>
+		/// <param name="executeJs"></param>
+		protected override void PostRenderCore(Func<string, string> executeJs)
+		{
+			RenderedStyles = executeJs("serverStyleSheet.getStyleTags()");
+		}
+	}
+}

src/React.Router/HtmlHelperExtensions.cs

@@ -84,6 +84,7 @@ public static IHtmlString ReactRouterWithContext<T>(
 		/// <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>
 		/// <param name="containerClass">HTML class(es) to set on the container tag</param>
+		/// <param name="renderFunctions">Functions to call during component render</param>
 		/// <returns><see cref="IHtmlString"/> containing the rendered markup for provided React Router component</returns>
 		public static IHtmlString ReactRouter<T>(
 			this IHtmlHelper htmlHelper,
@@ -95,7 +96,8 @@ public static IHtmlString ReactRouter<T>(
 			bool clientOnly = false,
 			bool serverOnly = false,
 			string containerClass = null,
-			Action<HttpResponse, RoutingContext> contextHandler = null
+			Action<HttpResponse, RoutingContext> contextHandler = null,
+			RenderFunctions renderFunctions = null
 		)
 		{
 			try
@@ -121,7 +123,7 @@ var reactComponent
 					reactComponent.ContainerClass = containerClass;
 				}
 
-				var executionResult = reactComponent.RenderRouterWithContext(clientOnly, serverOnly);
+				var executionResult = reactComponent.RenderRouterWithContext(clientOnly, serverOnly, renderFunctions);
 
 				if (executionResult.Context?.status != null || executionResult.Context?.url != null)
 				{

src/React.Router/ReactRouterComponent.cs

@@ -48,19 +48,26 @@ string path
 		/// </summary>
 		/// <param name="renderContainerOnly">Only renders component container. Used for client-side only rendering. Does not make sense in this context but included for consistency</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>
+		/// <param name="renderFunctions">Functions to call during component render</param>
 		/// <returns>Object containing HTML in string format and the React Router context object</returns>
-		public virtual ExecutionResult RenderRouterWithContext(bool renderContainerOnly = false, bool renderServerOnly = false)
+		public virtual ExecutionResult RenderRouterWithContext(
+			bool renderContainerOnly = false,
+			bool renderServerOnly = false,
+			RenderFunctions renderFunctions = null
+		)
 		{
-			_environment.Execute("var context = {};");
+			var reactRouterFunctions = new ReactRouterFunctions(renderFunctions: renderFunctions);
 
-			var html = RenderHtml(renderContainerOnly, renderServerOnly);
-
-			var contextString = _environment.Execute<string>("JSON.stringify(context);");
+			var html = RenderHtml(
+				renderContainerOnly,
+				renderServerOnly,
+				renderFunctions: reactRouterFunctions
+			);
 
 			return new ExecutionResult
 			{
 				RenderResult = html,
-				Context = JsonConvert.DeserializeObject<RoutingContext>(contextString),
+				Context = JsonConvert.DeserializeObject<RoutingContext>(reactRouterFunctions.ReactRouterContext),
 			};
 		}
 

src/React.Router/ReactRouterFunctions.cs

@@ -0,0 +1,44 @@
+using System;
+
+namespace React.Router
+{
+	/// <summary>
+	/// Render functions for React Router
+	/// </summary>
+	public class ReactRouterFunctions : RenderFunctions
+	{
+		/// <summary>
+		/// Constructor. Supports chained calls to multiple render functions by passing in a set of functions that should be called next.
+		/// The functions within the provided RenderFunctions will be called *after* this instance's.
+		/// Supports null as an argument.
+		/// </summary>
+		/// <param name="renderFunctions">The chained render functions to call</param>
+		public ReactRouterFunctions(RenderFunctions renderFunctions = null)
+			: base(renderFunctions)
+		{
+		}
+
+		/// <summary>
+		/// The returned react router context, as a JSON string
+		/// </summary>
+		public string ReactRouterContext { get; private set; }
+
+		/// <summary>
+		/// Implementation of PreRender
+		/// </summary>
+		/// <param name="executeJs"></param>
+		protected override void PreRenderCore(Func<string, string> executeJs)
+		{
+			executeJs("var context = {};");
+		}
+
+		/// <summary>
+		/// Implementation of PostRender
+		/// </summary>
+		/// <param name="executeJs"></param>
+		protected override void PostRenderCore(Func<string, string> executeJs)
+		{
+			ReactRouterContext = executeJs("JSON.stringify(context);");	
+		}
+	}
+}

src/React.Sample.Router.CoreMvc/Content/components/expose-components.js

@@ -3,3 +3,4 @@ require('expose-loader?ReactDOM!react-dom');
 require('expose-loader?ReactDOMServer!react-dom/server');
 
 require('expose-loader?RootComponent!./home.jsx');
+require('expose-loader?Styled!styled-components');