Add react tag helper. Clean up code and make it more consistent.

Microsoft.AspNet.NodeServices.Angular/AngularPrerenderTagHelper.cs

@@ -7,17 +7,10 @@ using Microsoft.AspNet.Http.Extensions;
 namespace Microsoft.AspNet.NodeServices.Angular
 {
     [HtmlTargetElement(Attributes = PrerenderModuleAttributeName)]
-    public class AngularRunAtServerTagHelper : TagHelper
+    public class AngularPrerenderTagHelper : TagHelper
     {
-        static StringAsTempFile nodeScript;
         static INodeServices fallbackNodeServices; // Used only if no INodeServices was registered with DI
         
-        static AngularRunAtServerTagHelper() {
-            // Consider populating this lazily
-            var script = EmbeddedResourceReader.Read(typeof (AngularRunAtServerTagHelper), "/Content/Node/angular-rendering.js");
-            nodeScript = new StringAsTempFile(script); // Will be cleaned up on process exit
-        }
-        
         const string PrerenderModuleAttributeName = "asp-ng2-prerender-module";
         const string PrerenderExportAttributeName = "asp-ng2-prerender-export";
         
@@ -30,7 +23,7 @@ namespace Microsoft.AspNet.NodeServices.Angular
         private IHttpContextAccessor contextAccessor;
         private INodeServices nodeServices;
 
-        public AngularRunAtServerTagHelper(IServiceProvider nodeServices, IHttpContextAccessor contextAccessor)
+        public AngularPrerenderTagHelper(IServiceProvider nodeServices, IHttpContextAccessor contextAccessor)
         {
             this.contextAccessor = contextAccessor;
             this.nodeServices = (INodeServices)nodeServices.GetService(typeof (INodeServices)) ?? fallbackNodeServices;
@@ -44,12 +37,13 @@ namespace Microsoft.AspNet.NodeServices.Angular
 
         public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
         {
-            var result = await this.nodeServices.InvokeExport(nodeScript.FileName, "renderComponent", new {
+            var result = await AngularRenderer.RenderToString(
-                componentModule = this.ModuleName,
+                nodeServices: this.nodeServices,
-                componentExport = this.ExportName,
+                componentModuleName: this.ModuleName,
-                tagName = output.TagName,
+                componentExportName: this.ExportName,
-                baseUrl = UriHelper.GetEncodedUrl(this.contextAccessor.HttpContext.Request)
+                componentTagName: output.TagName,
-            });
+                requestUrl: UriHelper.GetEncodedUrl(this.contextAccessor.HttpContext.Request)
+            );
             output.SuppressOutput();
             output.PostElement.AppendEncoded(result);
         }

Microsoft.AspNet.NodeServices.Angular/AngularRenderer.cs

@@ -0,0 +1,24 @@
+using System.Threading.Tasks;
+
+namespace Microsoft.AspNet.NodeServices.Angular
+{
+    public static class AngularRenderer
+    {
+        private static StringAsTempFile nodeScript;
+        
+        static AngularRenderer() {
+            // Consider populating this lazily
+            var script = EmbeddedResourceReader.Read(typeof (AngularRenderer), "/Content/Node/angular-rendering.js");
+            nodeScript = new StringAsTempFile(script); // Will be cleaned up on process exit
+        }
+        
+        public static async Task<string> RenderToString(INodeServices nodeServices, string componentModuleName, string componentExportName, string componentTagName, string requestUrl) {
+            return await nodeServices.InvokeExport(nodeScript.FileName, "renderToString", new {
+                moduleName = componentModuleName,
+                exportName = componentExportName,
+                tagName = componentTagName,
+                requestUrl = requestUrl
+            });
+        }
+    }
+}

Microsoft.AspNet.NodeServices.Angular/Content/Node/angular-rendering.js

@@ -3,20 +3,39 @@ var ngUniversal = require('angular2-universal-patched');
 var ng = require('angular2/angular2');
 var ngRouter = require('angular2/router');
 
-module.exports = {
+function getExportOrThrow(moduleInstance, moduleFilename, exportName) {
-    renderComponent: function(callback, options) {
+    if (!(exportName in moduleInstance)) {
-        // Find the component class. Use options.componentExport if specified, otherwise convert tag-name to PascalCase.
+        throw new Error('The module "' + moduleFilename + '" has no export named "' + exportName + '"');
-        var loadedModule = require(path.resolve(process.cwd(), options.componentModule));
+    }
-        var componentExport = options.componentExport || options.tagName.replace(/(-|^)([a-z])/g, function (m1, m2, char) { return char.toUpperCase(); });
+    return moduleInstance[exportName];
-        var component = loadedModule[componentExport];
+}
-        if (!component) {
-            throw new Error('The module "' + options.componentModule + '" has no export named "' + componentExport + '"');
-        }
 
+function findAngularComponent(options) {
+    var resolvedPath = path.resolve(process.cwd(), options.moduleName);
+    var loadedModule = require(resolvedPath);
+    if (options.exportName) {
+        // If exportName is specified explicitly, use it
+        return getExportOrThrow(loadedModule, resolvedPath, options.exportName);
+    } else if (typeof loadedModule === 'function') {
+        // Otherwise, if the module itself is a function, assume that is the component 
+        return loadedModule;
+    } else if (typeof loadedModule.default === 'function') {
+        // Otherwise, if the module has a default export which is a function, assume that is the component
+        return loadedModule.default;
+    } else {
+        // Otherwise, guess the export name by converting tag-name to PascalCase
+        var tagNameAsPossibleExport = options.tagName.replace(/(-|^)([a-z])/g, function (m1, m2, char) { return char.toUpperCase(); });
+        return getExportOrThrow(loadedModule, resolvedPath, tagNameAsPossibleExport);
+    }
+}
+
+module.exports = {
+    renderToString: function(callback, options) {
+        var component = findAngularComponent(options);
         var serverBindings = [
             ngRouter.ROUTER_BINDINGS,
             ngUniversal.HTTP_PROVIDERS,
-            ng.provide(ngUniversal.BASE_URL, { useValue: options.baseUrl }),
+            ng.provide(ngUniversal.BASE_URL, { useValue: options.requestUrl }),
             ngUniversal.SERVER_LOCATION_PROVIDERS
         ];
 

Microsoft.AspNet.NodeServices.Angular/project.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-alpha3",
+  "version": "1.0.0-alpha4",
   "description": "Microsoft.AspNet.NodeServices.Angular Class Library",
   "authors": [
     "Microsoft"

Microsoft.AspNet.NodeServices.React/Content/Node/react-rendering.js

@@ -10,6 +10,26 @@ var origJsLoader = require.extensions['.js'];
 require.extensions['.js'] = loadViaBabel;
 require.extensions['.jsx'] = loadViaBabel;
 
+function findReactComponent(options) {
+    var resolvedPath = path.resolve(process.cwd(), options.moduleName);
+    var loadedModule = require(resolvedPath);
+    if (options.exportName) {
+        // If exportName is specified explicitly, use it
+        if (!(options.exportName in loadedModule)) {
+            throw new Error('The module "' + resolvedPath + '" has no export named "' + options.exportName + '"');
+        }
+        return loadedModule[options.exportName];
+    } else if (typeof loadedModule === 'function') {
+        // Otherwise, if the module itself is a function, assume that is the component 
+        return loadedModule;
+    } else if (typeof loadedModule.default === 'function') {
+        // Otherwise, if the module has a default export which is a function, assume that is the component
+        return loadedModule.default;
+    } else {
+        throw new Error('Cannot find React component, because no export name was specified, and the module "' + resolvedPath + '" has no default exported class.');
+    }
+}
+
 function loadViaBabel(module, filename) {
     // Assume that all the app's own code is ES2015+ (optionally with JSX), but that none of the node_modules are.
     // The distinction is important because ES2015+ forces strict mode, and it may break ES3/5 if you try to run it in strict
@@ -25,14 +45,8 @@ function loadViaBabel(module, filename) {
 
 module.exports = {
     renderToString: function(callback, options) {
-        var resolvedPath = path.resolve(process.cwd(), options.moduleName);
+        var component = findReactComponent(options);
-        var requestedModule = require(resolvedPath);
+        var history = createMemoryHistory(options.requestUrl);
-        var component = options.exportName ? requestedModule[options.exportName] : requestedModule; 
-        if (!component) {
-            throw new Error('The module "' + resolvedPath + '" has no export named "' + options.exportName + '"');
-        }
-        
-        var history = createMemoryHistory(options.baseUrl);
         var reactElement = React.createElement(component, { history: history });
         var html = ReactDOMServer.renderToString(reactElement);
         callback(null, html);

Microsoft.AspNet.NodeServices.React/ReactPrerenderTagHelper.cs

@@ -0,0 +1,49 @@
+using System;
+using System.Threading.Tasks;
+using Microsoft.AspNet.Razor.Runtime.TagHelpers;
+using Microsoft.AspNet.Http;
+using Microsoft.AspNet.Http.Extensions;
+
+namespace Microsoft.AspNet.NodeServices.React
+{
+    [HtmlTargetElement(Attributes = PrerenderModuleAttributeName)]
+    public class ReactPrerenderTagHelper : TagHelper
+    {
+        static INodeServices fallbackNodeServices; // Used only if no INodeServices was registered with DI
+        
+        const string PrerenderModuleAttributeName = "asp-react-prerender-module";
+        const string PrerenderExportAttributeName = "asp-react-prerender-export";
+        
+        [HtmlAttributeName(PrerenderModuleAttributeName)]
+        public string ModuleName { get; set; }
+        
+        [HtmlAttributeName(PrerenderExportAttributeName)]
+        public string ExportName { get; set; }
+
+        private IHttpContextAccessor contextAccessor;
+        private INodeServices nodeServices;
+
+        public ReactPrerenderTagHelper(IServiceProvider nodeServices, IHttpContextAccessor contextAccessor)
+        {
+            this.contextAccessor = contextAccessor;
+            this.nodeServices = (INodeServices)nodeServices.GetService(typeof (INodeServices)) ?? fallbackNodeServices;
+            
+            // Consider removing the following. Having it means you can get away with not putting app.AddNodeServices()
+            // in your startup file, but then again it might be confusing that you don't need to.
+            if (this.nodeServices == null) {
+                this.nodeServices = fallbackNodeServices = Configuration.CreateNodeServices(NodeHostingModel.Http);
+            }
+        }
+
+        public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
+        {
+            var request = this.contextAccessor.HttpContext.Request;
+            var result = await ReactRenderer.RenderToString(
+                nodeServices: this.nodeServices,
+                componentModuleName: this.ModuleName,
+                componentExportName: this.ExportName,
+                requestUrl: request.Path + request.QueryString.Value);
+            output.Content.SetContentEncoded(result);
+        }
+    }
+}

Microsoft.AspNet.NodeServices.React/ReactRenderer.cs

@@ -12,15 +12,11 @@ namespace Microsoft.AspNet.NodeServices.React
             nodeScript = new StringAsTempFile(script); // Will be cleaned up on process exit
         }
         
-        public static Task<string> RenderToString(INodeServices nodeServices, string moduleName, string baseUrl) {
+        public static async Task<string> RenderToString(INodeServices nodeServices, string componentModuleName, string componentExportName, string requestUrl) {
-            return RenderToString(nodeServices, moduleName, /* exportName */ null, baseUrl);
-        }
-        
-        public static async Task<string> RenderToString(INodeServices nodeServices, string moduleName, string exportName, string baseUrl) {
             return await nodeServices.InvokeExport(nodeScript.FileName, "renderToString", new {
-                moduleName,
+                moduleName = componentModuleName,
-                exportName,
+                exportName = componentExportName,
-                baseUrl
+                requestUrl = requestUrl
             });
         }
     }

Microsoft.AspNet.NodeServices.React/project.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-alpha3",
+  "version": "1.0.0-alpha4",
   "description": "Microsoft.AspNet.NodeServices.React Class Library",
   "authors": [
     "Microsoft"
@@ -25,7 +25,8 @@
     }
   },
   "dependencies": {
-    "Microsoft.AspNet.NodeServices": "1.0.0-alpha3"
+    "Microsoft.AspNet.NodeServices": "1.0.0-alpha3",
+    "Microsoft.AspNet.Mvc.TagHelpers": "6.0.0-beta8"
   },
   "resource": [
     "Content/**/*"

samples/angular/MusicStore/project.json

@@ -19,7 +19,7 @@
     "EntityFramework.SQLite": "7.0.0-beta8",
     "Microsoft.AspNet.Identity.EntityFramework": "3.0.0-beta8",
     "AutoMapper": "4.0.0-alpha1",
-    "Microsoft.AspNet.NodeServices.Angular": "1.0.0-alpha3"
+    "Microsoft.AspNet.NodeServices.Angular": "1.0.0-alpha4"
   },
   "commands": {
     "web": "Microsoft.AspNet.Server.Kestrel"

samples/react/ReactGrid/Controllers/HomeController.cs

@@ -1,24 +1,12 @@
 using System.Threading.Tasks;
 using Microsoft.AspNet.Mvc;
-using Microsoft.AspNet.NodeServices;
-using Microsoft.AspNet.NodeServices.React;
 
 namespace ReactExample.Controllers
 {
     public class HomeController : Controller
     {
-        private INodeServices nodeServices;
+        public IActionResult Index(int pageIndex)
-
-        public HomeController(INodeServices nodeServices) {
-            this.nodeServices = nodeServices;
-        }
-        
-        public async Task<IActionResult> Index(int pageIndex)
         {
-            ViewData["ReactOutput"] = await ReactRenderer.RenderToString(this.nodeServices,
-                moduleName: "ReactApp/components/ReactApp.jsx",
-                baseUrl: Request.Path
-            );
             return View();
         }
 

samples/react/ReactGrid/Startup.cs

@@ -27,9 +27,6 @@ namespace ReactExample
         {
             // Add MVC services to the services container.
             services.AddMvc();
-            
-            // Enable Node Services
-            services.AddNodeServices();
         }
 
         // Configure is called after ConfigureServices is called.

samples/react/ReactGrid/Views/Home/Index.cshtml

@@ -1,4 +1,4 @@
-<div id="react-app">@Html.Raw(ViewData["ReactOutput"])</div>
+<div id="react-app" asp-react-prerender-module="ReactApp/components/ReactApp.jsx"></div>
 
 @section scripts {
     <script src="bundle.js"></script>

samples/react/ReactGrid/Views/_ViewImports.cshtml

@@ -1,2 +1,3 @@
 @using ReactExample
 @addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers"
+@addTagHelper "*, Microsoft.AspNet.NodeServices.React"

samples/react/ReactGrid/project.json

@@ -16,7 +16,7 @@
     "Microsoft.Framework.Logging": "1.0.0-beta8",
     "Microsoft.Framework.Logging.Console": "1.0.0-beta8",
     "Microsoft.Framework.Logging.Debug": "1.0.0-beta8",
-    "Microsoft.AspNet.NodeServices.React": "1.0.0-alpha3"
+    "Microsoft.AspNet.NodeServices.React": "1.0.0-alpha4"
   },
   "commands": {
     "web": "Microsoft.AspNet.Server.Kestrel"