Merge pull request #71 from rkostrzewski/feature/webpack-ssr

feature: Prerender using webpack

Author: hassanbazzi

package.json

@@ -73,6 +73,7 @@
   "devDependencies": {
     "babel-cli": "^6.24.0",
     "babel-eslint": "^7.2.1",
+    "babel-plugin-transform-runtime": "^6.23.0",
     "chrome-launcher": "^0.1.1",
     "chrome-remote-interface": "^0.23.2",
     "eslint": "^3.19.0",
@@ -81,6 +82,8 @@
     "html-webpack-exclude-assets-plugin": "0.0.5",
     "lodash": "^4.17.4",
     "ncp": "^2.0.0",
+    "node-sass": "^4.5.3",
+    "sass-loader": "^6.0.6",
     "tap-diff": "^0.1.1",
     "tape": "^4.6.3",
     "uuid": "^3.0.1"
@@ -134,7 +137,7 @@
     "rimraf": "^2.6.1",
     "script-ext-html-webpack-plugin": "^1.8.0",
     "simplehttp2server": "^2.0.0",
-    "sw-precache-webpack-plugin": "^0.11.0",
+    "sw-precache-webpack-plugin": "^0.11.2",
     "tmp": "0.0.31",
     "unfetch": "^3.0.0",
     "url-loader": "^0.5.8",

src/commands/build.js

@@ -2,9 +2,7 @@ import { resolve } from 'path';
 import promisify from 'es6-promisify';
 import rimraf from 'rimraf';
 import asyncCommand from '../lib/async-command';
-import webpackConfig from '../lib/webpack-config';
-import transformConfig from '../lib/transform-config';
-import runWebpack, { showStats, writeJsonStats } from '../lib/run-webpack';
+import runWebpack, { showStats, writeJsonStats } from '../lib/webpack/run-webpack';
 
 export default asyncCommand({
 	command: 'build [src] [dest]',
@@ -47,15 +45,12 @@ export default asyncCommand({
 	},
 
 	async handler(argv) {
-		let config = webpackConfig(argv);
-		await transformConfig(argv, config);
-
 		if (argv.clean) {
 			let dest = resolve(argv.cwd || process.cwd(), argv.dest || 'build');
 			await promisify(rimraf)(dest);
 		}
 
-		let stats = await runWebpack(false, config);
+		let stats = await runWebpack(false, argv);
 		showStats(stats);
 
 		if (argv.json) {

src/commands/watch.js

@@ -1,8 +1,6 @@
 import asyncCommand from '../lib/async-command';
-import webpackConfig from '../lib/webpack-config';
-import transformConfig from '../lib/transform-config';
 import getSslCert from '../lib/ssl-cert';
-import runWebpack, { showStats } from '../lib/run-webpack';
+import runWebpack, { showStats } from '../lib/webpack/run-webpack';
 
 export default asyncCommand({
 	command: 'watch [src]',
@@ -54,10 +52,7 @@ export default asyncCommand({
 			argv.https = ssl;
 		}
 
-		let config = webpackConfig(argv);
-		await transformConfig(argv, config);
-
-		let stats = await runWebpack(true, config, showStats);
+		let stats = await runWebpack(true, argv, showStats);
 		showStats(stats);
 	}
 });

src/lib/prerender.js

@@ -16,7 +16,7 @@ module.exports.pitch = function(remainingRequest) {
 	}
 
 	return `
-		import async from ${JSON.stringify(path.resolve(__dirname, '../components/async'))};
+		import async from ${JSON.stringify(path.resolve(__dirname, '../../components/async'))};
 
 		function load(cb) {
 			require.ensure([], function(require) {

src/lib/async-component-loader.js src/lib/webpack/async-component-loader.jssrc/lib/async-component-loader.js renamed to src/lib/webpack/async-component-loader.js

@@ -0,0 +1,3 @@
+module.exports = function(source, map) {
+  this.callback(null, source, map);
+};

src/lib/webpack/dummy-loader.js

@@ -0,0 +1,27 @@
+import { resolve } from 'path';
+
+export default function prerender(outputDir, params) {
+	params = params || {};
+
+	let entry = resolve(outputDir, './ssr-build/ssr-bundle.js'),
+		url = params.url || '/';
+
+	global.location = { href:url, pathname:url };
+	global.history = {};
+
+	let m = require(entry),
+		app = m && m.default || m;
+
+	if (typeof app!=='function') {
+		// eslint-disable-next-line no-console
+		console.warn('Entry does not export a Component function/class, aborting prerendering.');
+		return '';
+	}
+
+	let preact = require('preact'),
+		renderToString = require('preact-render-to-string');
+
+	let html = renderToString(preact.h(app, { url }));
+
+	return html;
+}