Improve chaining server-render helper functions

It was always a bit clunky that the constructor was used for this. Now, there is a first-class ChainedRenderFunctions type that can be used to accomplish the same thing.

Author: dustinsoftware

site/jekyll/features/css-in-js.md

@@ -9,6 +9,8 @@ CSS-in-JS is a technique for declaring styles within components. ReactJS.NET sup
 
 Make sure ReactJS.NET is up to date. You will need at least ReactJS.NET 4.0 (which is in public beta at the time of writing).
 
+If you're using more than one CSS-in-JS library in your project, we've got you covered! Just pass mutliple server-render helper functions into `ChainedRenderFunctions`, and they will be called in the order they are passed in.
+
 ### [Styled Components](https://github.com/styled-components/styled-components)
 
 Expose styled-components as `global.Styled`:
@@ -27,7 +29,7 @@ Add the render helper to the call to `Html.React`:
 	var styledComponentsFunctions = new StyledComponentsFunctions();
 }
 
-@Html.React("RootComponent", new { exampleProp = "a" }, renderFunctions: styledComponentsFunctions)
+@Html.React("RootComponent", new { exampleProp = "a" }, renderFunctions: new ChainedRenderFunctions(styledComponentsFunctions))
 
 @{
 	ViewBag.ServerStyles = styledComponentsFunctions.RenderedStyles;
@@ -104,7 +106,7 @@ Add the render helper to the call to `Html.React`:
 	var reactJssFunctions = new ReactJssFunctions();
 }
 
-@Html.React("RootComponent", new { exampleProp = "a" }, renderFunctions: reactJssFunctions)
+@Html.React("RootComponent", new { exampleProp = "a" }, renderFunctions: new ChainedRenderFunctions(reactJssFunctions))
 
 @{
 	ViewBag.ServerStyles = reactJssFunctions.RenderedStyles;
@@ -189,7 +191,7 @@ Add the render helper to the call to `Html.React`:
 @using React.AspNet
 @using React.RenderFunctions
 
-@Html.React("RootComponent", new { exampleProp = "a" }, renderFunctions: new EmotionFunctions())
+@Html.React("RootComponent", new { exampleProp = "a" }, renderFunctions: new ChainedRenderFunctions(new EmotionFunctions()))
 ```
 
 You're now ready to declare styles inside components:

site/jekyll/features/react-helmet.md

@@ -25,7 +25,7 @@ Add the render helper to the call to `Html.React`:
 	var helmetFunctions = new ReactHelmetFunctions();
 }
 
-@Html.React("RootComponent", new { exampleProp = "a" }, renderFunctions: helmetFunctions)
+@Html.React("RootComponent", new { exampleProp = "a" }, renderFunctions: new ChainedRenderFunctions(helmetFunctions))
 
 @{
 	ViewBag.HelmetTitle = helmetFunctions.RenderedHelmet.GetValueOrDefault("title");

src/React.Core/RenderFunctions/ChainedRenderFunctions.cs

@@ -0,0 +1,92 @@
+using System;
+using System.Text;
+
+namespace React.RenderFunctions
+{
+	/// <summary>
+	/// Helper to chain functions to be executed during server-side rendering.
+	/// For instance, React Router and React Helmet can both be used together using this class.
+	/// </summary>
+	public class ChainedRenderFunctions : IRenderFunctions
+	{
+		private readonly IRenderFunctions[] _chainedFunctions;
+
+		/// <summary>
+		/// Constructor. Supports chained calls to multiple render functions by passing in a set of functions that should be called next.
+		/// </summary>
+		/// <param name="chainedFunctions">The chained render functions to call</param>
+		public ChainedRenderFunctions(params IRenderFunctions[] chainedFunctions)
+		{
+			_chainedFunctions = chainedFunctions;
+		}
+
+		/// <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 void PreRender(Func<string, string> executeJs)
+		{
+			foreach (var chainedFunction in _chainedFunctions)
+			{
+				chainedFunction.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 WrapComponent(string componentToRender)
+		{
+			string wrappedComponent = componentToRender;
+
+			foreach (var chainedFunction in _chainedFunctions)
+			{
+				wrappedComponent = chainedFunction.WrapComponent(wrappedComponent);
+			}
+
+			return wrappedComponent;
+		}
+
+
+		/// <summary>
+		/// Transforms the compiled rendered component HTML
+		/// This is useful for libraries like emotion which take rendered component HTML and output the transformed HTML plus additional style tags
+		/// </summary>
+		/// <param name="input">The component HTML</param>
+		/// <returns>A wrapped expression</returns>
+		public string TransformRenderedHtml(string input)
+		{
+			string renderedHtml = input;
+
+			foreach (var chainedFunction in _chainedFunctions)
+			{
+				renderedHtml = chainedFunction.TransformRenderedHtml(renderedHtml);
+			}
+
+			return renderedHtml;
+		}
+
+
+		/// <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)
+		{
+			foreach (var chainedFunction in _chainedFunctions)
+			{
+				chainedFunction.PostRender(executeJs);
+			}
+		}
+	}
+}

src/React.Core/RenderFunctions/EmotionFunctions.cs

@@ -9,23 +9,12 @@ namespace React.RenderFunctions
 	/// </summary>
 	public class EmotionFunctions : RenderFunctionsBase
 	{
-		/// <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 EmotionFunctions(IRenderFunctions renderFunctions = null)
-			: base(renderFunctions)
-		{
-		}
-
 		/// <summary>
 		/// Implementation of TransformRenderedHtml
 		/// </summary>
 		/// <param name="input"></param>
 		/// <returns></returns>
-		protected override string TransformRenderedHtmlCore(string input)
+		public override string TransformRenderedHtml(string input)
 		{
 			return $"EmotionServer.renderStylesToString({input})";
 		}

src/React.Core/RenderFunctions/ReactHelmetFunctions.cs

@@ -11,17 +11,6 @@ namespace React.RenderFunctions
 	/// </summary>
 	public class ReactHelmetFunctions : RenderFunctionsBase
 	{
-		/// <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 ReactHelmetFunctions(IRenderFunctions renderFunctions = null)
-			: base(renderFunctions)
-		{
-		}
-
 		/// <summary>
 		/// Dictionary of Helmet properties, rendered as raw HTML tags
 		/// Available keys: "base", "bodyAttributes", "htmlAttributes", "link", "meta", "noscript", "script", "style", "title"
@@ -32,7 +21,7 @@ public ReactHelmetFunctions(IRenderFunctions renderFunctions = null)
 		/// Implementation of PostRender
 		/// </summary>
 		/// <param name="executeJs"></param>
-		protected override void PostRenderCore(Func<string, string> executeJs)
+		public override void PostRender(Func<string, string> executeJs)
 		{
 			var helmetString = executeJs(@"
 var helmetResult = Helmet.default.renderStatic();

src/React.Core/RenderFunctions/ReactJssFunctions.cs

@@ -8,17 +8,6 @@ namespace React.RenderFunctions
 	/// </summary>
 	public class ReactJssFunctions : RenderFunctionsBase
 	{
-		/// <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 ReactJssFunctions(IRenderFunctions renderFunctions = null)
-			: base(renderFunctions)
-		{
-		}
-
 		/// <summary>
 		/// HTML style tag containing the rendered styles
 		/// </summary>
@@ -28,7 +17,7 @@ public ReactJssFunctions(IRenderFunctions renderFunctions = null)
 		/// Implementation of PreRender
 		/// </summary>
 		/// <param name="executeJs"></param>
-		protected override void PreRenderCore(Func<string, string> executeJs)
+		public override void PreRender(Func<string, string> executeJs)
 		{
 			executeJs("var reactJssProps = { registry: new ReactJss.SheetsRegistry() };");
 		}
@@ -38,7 +27,7 @@ protected override void PreRenderCore(Func<string, string> executeJs)
 		/// </summary>
 		/// <param name="componentToRender"></param>
 		/// <returns></returns>
-		protected override string WrapComponentCore(string componentToRender)
+		public override string WrapComponent(string componentToRender)
 		{
 			return ($"React.createElement(ReactJss.JssProvider, reactJssProps, ({componentToRender}))");
 		}
@@ -47,7 +36,7 @@ protected override string WrapComponentCore(string componentToRender)
 		/// Implementation of PostRender
 		/// </summary>
 		/// <param name="executeJs"></param>
-		protected override void PostRenderCore(Func<string, string> executeJs)
+		public override void PostRender(Func<string, string> executeJs)
 		{
 			RenderedStyles = $"<style type=\"text/css\" id=\"server-side-styles\">{executeJs("reactJssProps.registry.toString()")}</style>";
 		}

src/React.Core/RenderFunctions/StyledComponentsFunctions.cs

@@ -8,17 +8,6 @@ namespace React.RenderFunctions
 	/// </summary>
 	public class StyledComponentsFunctions : RenderFunctionsBase
 	{
-		/// <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(IRenderFunctions renderFunctions = null)
-			: base(renderFunctions)
-		{
-		}
-
 		/// <summary>
 		/// HTML style tag containing the rendered styles
 		/// </summary>
@@ -28,7 +17,7 @@ public StyledComponentsFunctions(IRenderFunctions renderFunctions = null)
 		/// Implementation of PreRender
 		/// </summary>
 		/// <param name="executeJs"></param>
-		protected override void PreRenderCore(Func<string, string> executeJs)
+		public override void PreRender(Func<string, string> executeJs)
 		{
 			executeJs("var serverStyleSheet = new Styled.ServerStyleSheet();");
 		}
@@ -38,7 +27,7 @@ protected override void PreRenderCore(Func<string, string> executeJs)
 		/// </summary>
 		/// <param name="componentToRender"></param>
 		/// <returns></returns>
-		protected override string WrapComponentCore(string componentToRender)
+		public override string WrapComponent(string componentToRender)
 		{
 			return ($"serverStyleSheet.collectStyles({componentToRender})");
 		}
@@ -47,7 +36,7 @@ protected override string WrapComponentCore(string componentToRender)
 		/// Implementation of PostRender
 		/// </summary>
 		/// <param name="executeJs"></param>
-		protected override void PostRenderCore(Func<string, string> executeJs)
+		public override void PostRender(Func<string, string> executeJs)
 		{
 			RenderedStyles = executeJs("serverStyleSheet.getStyleTags()");
 		}

src/React.Core/RenderFunctionsBase.cs

@@ -8,62 +8,14 @@ namespace React
 	/// </summary>
 	public abstract class RenderFunctionsBase : IRenderFunctions
 	{
-		private readonly IRenderFunctions _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 RenderFunctionsBase(IRenderFunctions renderFunctions)
-		{
-			_renderFunctions = renderFunctions;
-		}
-
-		/// <summary>
-		/// Implementation of PreRender
-		/// </summary>
-		/// <param name="executeJs"></param>
-		protected virtual void PreRenderCore(Func<string, string> executeJs)
-		{
-		}
-
-		/// <summary>
-		/// Implementation of WrapComponent
-		/// </summary>
-		/// <param name="componentToRender"></param>
-		/// <returns></returns>
-		protected virtual string WrapComponentCore(string componentToRender)
-		{
-			return componentToRender;
-		}
-
-		/// <summary>
-		/// Implementation of TransformRenderedHtml
-		/// </summary>
-		/// <param name="input"></param>
-		/// <returns></returns>
-		protected virtual string TransformRenderedHtmlCore(string input) => input;
-
-		/// <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 void PreRender(Func<string, string> executeJs)
+		public virtual void PreRender(Func<string, string> executeJs)
 		{
-			PreRenderCore(executeJs);
-			_renderFunctions?.PreRender(executeJs);
 		}
 
 
@@ -75,12 +27,7 @@ public void PreRender(Func<string, string> executeJs)
 		/// </summary>
 		/// <param name="componentToRender">The Javascript expression to wrap</param>
 		/// <returns>A wrapped expression</returns>
-		public string WrapComponent(string componentToRender)
-		{
-			return _renderFunctions == null
-				? WrapComponentCore(componentToRender)
-				: _renderFunctions.WrapComponent(WrapComponentCore(componentToRender));
-		}
+		public virtual string WrapComponent(string componentToRender) => componentToRender;
 
 
 		/// <summary>
@@ -89,12 +36,7 @@ public string WrapComponent(string componentToRender)
 		/// </summary>
 		/// <param name="input">The component HTML</param>
 		/// <returns>A wrapped expression</returns>
-		public string TransformRenderedHtml(string input)
-		{
-			return _renderFunctions == null
-				? TransformRenderedHtmlCore(input)
-				: _renderFunctions.TransformRenderedHtml(TransformRenderedHtmlCore(input));
-		}
+		public virtual string TransformRenderedHtml(string input) => input;
 
 
 		/// <summary>
@@ -103,10 +45,8 @@ public string TransformRenderedHtml(string input)
 		/// 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)
+		public virtual void PostRender(Func<string, string> executeJs)
 		{
-			PostRenderCore(executeJs);
-			_renderFunctions?.PostRender(executeJs);
 		}
 	}
 }