Support loading prerenderer boot module via Webpack config; use this in Angular 2 template

src/Microsoft.AspNet.SpaServices/Content/Node/prerenderer.js

@@ -1,81 +1,65 @@
 // -----------------------------------------------------------------------------------------
-// Prepare the Node environment to support loading .jsx/.ts/.tsx files without needing precompilation,
+// Loading via Webpack
-// since that's such a common scenario. In the future, this might become a config option.
+// This is optional. You don't have to use Webpack. But if you are doing, it's extremely convenient
-// This is bundled in with the actual prerendering logic below just to simplify the initialization
+// to be able to load your boot module via Webpack compilation, so you can use whatever source language
-// logic (we can't have cross-file imports, because these files don't exist on disk until the
+// you like (e.g., TypeScript), and so that loader plugins (e.g., require('./mystyles.less')) work in
-// StringAsTempFile utility puts them there temporarily).
+// exactly the same way on the server as you do on the client.
+// If you don't use Webpack, then it's up to you to define a plain-JS boot module that in turn loads
+// whatever other files you need (e.g., using some other compiler/bundler API, or maybe just having
+// already precompiled to plain JS files on disk).
+function loadViaWebpackNoCache(webpackConfigPath, modulePath) {
+    var ExternalsPlugin = require('webpack-externals-plugin');
+    var requireFromString = require('require-from-string');
+    var MemoryFS = require('memory-fs');
+    var webpack = require('webpack');
 
-// TODO: Consider some general method for checking if you have all the necessary NPM modules installed,
+    return new Promise(function(resolve, reject) {
-// and if not, giving an error that tells you what command to execute to install the missing ones.
+        // Load the Webpack config and make alterations needed for loading the output into Node
-var fs = require('fs');
+        var webpackConfig = require(webpackConfigPath);
-var ts = requireIfInstalled('ntypescript');
+        webpackConfig.entry = modulePath;
-var babelCore = require('babel-core');
+        webpackConfig.target = 'node';
-var resolveBabelRc = require('babel-loader/lib/resolve-rc'); // If this ever breaks, we can easily scan up the directory hierarchy ourselves 
+        webpackConfig.output = { path: '/', filename: 'webpack-output.js', libraryTarget: 'commonjs' };
-var origJsLoader = require.extensions['.js'];
 
-function resolveBabelOptions(relativeToFilename) {
+        // In Node, we want anything under /node_modules/ to be loaded natively and not bundled into the output
-    var babelRcText = resolveBabelRc(relativeToFilename);
+        // (partly because it's faster, but also because otherwise there'd be different instances of modules
-    try {
+        // depending on how they were loaded, which could lead to errors)
-        return babelRcText ? JSON.parse(babelRcText) : {};
+        webpackConfig.plugins = webpackConfig.plugins || [];
-    } catch (ex) {
+        webpackConfig.plugins.push(new ExternalsPlugin({ type: 'commonjs', include: /node_modules/ }));
-        ex.message = 'Error while parsing babelrc JSON: ' + ex.message;
-        throw ex;
-    }
-}
 
-function loadViaTypeScript(module, filename) {
+        // The CommonsChunkPlugin is not compatible with a CommonJS environment like Node, nor is it needed in that case 
-    if (!ts) {
+        webpackConfig.plugins = webpackConfig.plugins.filter(function(plugin) {
-        throw new Error('Can\'t load .ts/.tsx files because the \'ntypescript\' package isn\'t installed.\nModule requested: ' + module);
+            return !(plugin instanceof webpack.optimize.CommonsChunkPlugin);
-    }
+        });
 
-    // First perform a minimal transpilation from TS code to ES2015. This is very fast (doesn't involve type checking)
+        // Create a compiler instance that stores its output in memory, then load its output
-    // and is unlikely to need any special compiler options
+        var compiler = webpack(webpackConfig);
-    var src = fs.readFileSync(filename, 'utf8');
+        compiler.outputFileSystem = new MemoryFS();
-    var compilerOptions = { jsx: ts.JsxEmit.Preserve, module: ts.ModuleKind.ES2015, target: ts.ScriptTarget.ES6, emitDecoratorMetadata: true };
+        compiler.run(function(err, stats) {
-    var es6Code = ts.transpile(src, compilerOptions, 'test.tsx', /* diagnostics */ []);
+            if (err) {
-    
+                reject(err);
-    // Second, process the ES2015 via Babel. We have to do this (instead of going directly from TS to ES5) because
-    // TypeScript's ES5 output isn't exactly compatible with Node-style CommonJS modules. The main issue is with
-    // resolving default exports - https://github.com/Microsoft/TypeScript/issues/2719
-    var es5Code = babelCore.transform(es6Code, resolveBabelOptions(filename)).code;
-    return module._compile(es5Code, filename);
-}
-
-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
-    // mode when the developer didn't expect that (e.g., current versions of underscore.js can't be loaded in strict mode).
-    var useBabel = filename.indexOf('node_modules') < 0;
-    if (useBabel) {
-        var transformedFile = babelCore.transformFileSync(filename, resolveBabelOptions(filename));
-        return module._compile(transformedFile.code, filename);
             } else {
-        return origJsLoader.apply(this, arguments);
+                var fileContent = compiler.outputFileSystem.readFileSync('/webpack-output.js', 'utf8');
+                var moduleInstance = requireFromString(fileContent);
+                resolve(moduleInstance);
             }
+        });
+    });
 }
 
-function requireIfInstalled(packageName) {
+// Ensure we only go through the compile process once per [config, module] pair
-    return isPackageInstalled(packageName) ? require(packageName) : null;
+var loadViaWebpackPromisesCache = {};
-}
+function loadViaWebpack(webpackConfigPath, modulePath, callback) {
-
+    var cacheKey = JSON.stringify(webpackConfigPath) + JSON.stringify(modulePath);
-function isPackageInstalled(packageName) {
+    if (!(cacheKey in loadViaWebpackPromisesCache)) {
-    try {
+        loadViaWebpackPromisesCache[cacheKey] = loadViaWebpackNoCache(webpackConfigPath, modulePath);
-        require.resolve(packageName);
-        return true;
-    } catch(e) {
-        return false;
     }
+    loadViaWebpackPromisesCache[cacheKey].then(function(result) {
+        callback(null, result);
+    }, function(error) {
+        callback(error);
+    })
 }
 
-function register() {
-    require.extensions['.js'] = loadViaBabel;
-    require.extensions['.jsx'] = loadViaBabel;
-    require.extensions['.ts'] = loadViaTypeScript;
-    require.extensions['.tsx'] = loadViaTypeScript;
-};
-
-register();
-
 // -----------------------------------------------------------------------------------------
 // Rendering
 
@@ -85,27 +69,56 @@ var domain = require('domain');
 var domainTask = require('domain-task');
 var baseUrl = require('domain-task/fetch').baseUrl;
 
-function findBootFunc(bootModulePath, bootModuleExport) {
+function findBootModule(bootModule, callback) {
-    var resolvedPath = path.resolve(process.cwd(), bootModulePath);
+    var bootModuleNameFullPath = path.resolve(process.cwd(), bootModule.moduleName); 
-    var bootFunc = require(resolvedPath);
+    if (bootModule.webpackConfig) {
-    if (bootModuleExport) {
+        var webpackConfigFullPath = path.resolve(process.cwd(), bootModule.webpackConfig);
-        bootFunc = bootFunc[bootModuleExport];
+        loadViaWebpack(webpackConfigFullPath, bootModuleNameFullPath, callback);
-    } else if (typeof bootFunc !== 'function') {
-        bootFunc = bootFunc.default; // TypeScript sometimes uses this name for default exports
-    }
-    if (typeof bootFunc !== 'function') {
-        if (bootModuleExport) {
-            throw new Error('The module at ' + bootModulePath + ' has no function export named ' + bootModuleExport + '.');
     } else {
-            throw new Error('The module at ' + bootModulePath + ' does not export a default function, and you have not specified which export to invoke.');
+        callback(null, require(bootModuleNameFullPath));
     }
-    }
-    
-    return bootFunc;
 }
 
-function renderToString(callback, bootModulePath, bootModuleExport, absoluteRequestUrl, requestPathAndQuery) {
+function findBootFunc(bootModule, callback) {
-    var bootFunc = findBootFunc(bootModulePath, bootModuleExport);
+    // First try to load the module (possibly via Webpack)
+    findBootModule(bootModule, function(findBootModuleError, foundBootModule) {
+        if (findBootModuleError) {
+            callback(findBootModuleError);
+            return;
+        }
+        
+        // Now try to pick out the function they want us to invoke
+        var bootFunc;
+        if (bootModule.exportName) {
+            // Explicitly-named export
+            bootFunc = foundBootModule[bootModule.exportName];
+        } else if (typeof foundBootModule !== 'function') {
+            // TypeScript-style default export
+            bootFunc = foundBootModule.default;
+        } else {
+            // Native default export
+            bootFunc = foundBootModule;
+        }
+        
+        // Validate the result
+        if (typeof bootFunc !== 'function') {
+            if (bootModule.exportName) {
+                callback(new Error('The module at ' + bootModule.moduleName + ' has no function export named ' + bootModule.exportName + '.'));
+            } else {
+                callback(new Error('The module at ' + bootModule.moduleName + ' does not export a default function, and you have not specified which export to invoke.'));
+            }
+        } else {
+            callback(null, bootFunc);
+        }
+    });
+}
+
+function renderToString(callback, bootModule, absoluteRequestUrl, requestPathAndQuery) {
+    findBootFunc(bootModule, function (findBootFuncError, bootFunc) {
+        if (findBootFuncError) {
+            callback(findBootFuncError);
+            return;
+        }
         
         // Prepare a promise that will represent the completion of all domain tasks in this execution context.
         // The boot code will wait for this before performing its final render.
@@ -144,6 +157,7 @@ function renderToString(callback, bootModulePath, bootModuleExport, absoluteRequ
                 domainTaskCompletionPromiseResolve();
             }
         });        
+    });
 }
 
 function bindPromiseContinuationsToDomain(promise, domainInstance) {

src/Microsoft.AspNet.SpaServices/Prerendering/PrerenderTagHelper.cs

@@ -17,6 +17,7 @@ namespace Microsoft.AspNet.SpaServices.Prerendering
         
         const string PrerenderModuleAttributeName = "asp-prerender-module";
         const string PrerenderExportAttributeName = "asp-prerender-export";
+        const string PrerenderWebpackConfigAttributeName = "asp-prerender-webpack-config";
         
         [HtmlAttributeName(PrerenderModuleAttributeName)]
         public string ModuleName { get; set; }
@@ -24,6 +25,9 @@ namespace Microsoft.AspNet.SpaServices.Prerendering
         [HtmlAttributeName(PrerenderExportAttributeName)]
         public string ExportName { get; set; }
         
+        [HtmlAttributeName(PrerenderWebpackConfigAttributeName)]
+        public string WebpackConfigPath { get; set; }
+
         private IHttpContextAccessor contextAccessor;
         private INodeServices nodeServices;
 
@@ -48,13 +52,15 @@ namespace Microsoft.AspNet.SpaServices.Prerendering
             var request = this.contextAccessor.HttpContext.Request;
             var result = await Prerenderer.RenderToString(
                 nodeServices: this.nodeServices,
-                componentModuleName: this.ModuleName,
+                bootModule: new JavaScriptModuleExport(this.ModuleName) {
-                componentExportName: this.ExportName,
+                    exportName = this.ExportName,
+                    webpackConfig = this.WebpackConfigPath
+                },
                 requestAbsoluteUrl: UriHelper.GetEncodedUrl(this.contextAccessor.HttpContext.Request),
                 requestPathAndQuery: request.Path + request.QueryString.Value);
             output.Content.SetHtmlContent(result.Html);
             
-            // Also attach any specific globals to the 'window' object. This is useful for transferring
+            // Also attach any specified globals to the 'window' object. This is useful for transferring
             // general state between server and client.
             if (result.Globals != null) {
                 var stringBuilder = new StringBuilder();

src/Microsoft.AspNet.SpaServices/Prerendering/Prerenderer.cs

@@ -16,12 +16,21 @@ namespace Microsoft.AspNet.SpaServices.Prerendering
             });
         }
         
-        public static async Task<RenderToStringResult> RenderToString(INodeServices nodeServices, string componentModuleName, string componentExportName, string requestAbsoluteUrl, string requestPathAndQuery) {
+        public static async Task<RenderToStringResult> RenderToString(INodeServices nodeServices, JavaScriptModuleExport bootModule, string requestAbsoluteUrl, string requestPathAndQuery) {
             return await nodeServices.InvokeExport<RenderToStringResult>(nodeScript.Value.FileName, "renderToString", 
-                /* bootModulePath */ componentModuleName,
+                bootModule,
-                /* bootModuleExport */ componentExportName,
+                requestAbsoluteUrl,
-                /* absoluteRequestUrl */ requestAbsoluteUrl,
+                requestPathAndQuery);
-                /* requestPathAndQuery */ requestPathAndQuery);
+        }
+    }
+    
+    public class JavaScriptModuleExport {
+        public string moduleName { get; private set; }
+        public string exportName { get; set; }
+        public string webpackConfig { get; set; }
+        
+        public JavaScriptModuleExport(string moduleName) {
+            this.moduleName = moduleName;
         }
     }
     

templates/Angular2Spa/ClientApp/boot-server.ts

@@ -4,17 +4,9 @@ import * as ngRouter from 'angular2/router';
 import * as ngUniversal from 'angular2-universal-preview';
 import { BASE_URL } from 'angular2-universal-preview/dist/server/src/http/node_http';
 import * as ngUniversalRender from 'angular2-universal-preview/dist/server/src/render';
+import { App } from './components/app/app';
 
-// TODO: Make this ugly code go away, e.g., by somehow loading via Webpack
+export default function (params: any): Promise<{ html: string, globals?: any }> {
-function loadAsString(module, filename) {
-    module.exports = require('fs').readFileSync(filename, 'utf8');
-}
-(require as any).extensions['.html'] = loadAsString;
-(require as any).extensions['.css'] = loadAsString;
-let App: any = require('./components/app/app').App;
-
-export default function (params: any): Promise<{ html: string }> {
-    return new Promise<{ html: string, globals: { [key: string]: any } }>((resolve, reject) => {
     const serverBindings = [
         ngRouter.ROUTER_BINDINGS,
         ngUniversal.HTTP_PROVIDERS,
@@ -24,9 +16,7 @@ export default function (params: any): Promise<{ html: string }> {
         ngUniversal.SERVER_LOCATION_PROVIDERS
     ];
 
-        ngUniversalRender.renderToString(App, serverBindings).then(
+    return ngUniversalRender.renderToString(App, serverBindings).then(html => {
-            html => resolve({ html, globals: {} }), 
+        return { html, globals: {}};
-            reject // Also propagate any errors back into the host application
-        );
     });
 }

templates/Angular2Spa/Views/Home/Index.cshtml

@@ -2,7 +2,8 @@
     ViewData["Title"] = "Home Page";
 }
 
-<app asp-prerender-module="ClientApp/boot-server">Loading...</app>
+<app asp-prerender-module="ClientApp/boot-server"
+     asp-prerender-webpack-config="webpack.config.js">Loading...</app>
 
 @section scripts {
     <script src="~/dist/main.js" asp-append-version="true"></script>

templates/Angular2Spa/package.json

@@ -35,7 +35,9 @@
     "parse5": "^1.5.1",
     "preboot": "^1.1.3",
     "reflect-metadata": "^0.1.2",
+    "require-from-string": "^1.1.0",
     "rxjs": "^5.0.0-beta.2",
+    "webpack-externals-plugin": "^1.0.0",
     "zone.js": "^0.5.15"
   }
 }