Allow a custom server handler to wrap the server renderer. (#40)

pho3nixf1re · richardscarrott · commit db26bca1cf5f · 2017-10-14T12:44:32.000+01:00
diff --git a/example/express/index.js b/example/express/index.js
@@ -2,7 +2,7 @@ const express = require('express');
 const webpack = require('webpack');
 const webpackDevMiddleware = require('webpack-dev-middleware');
 const webpackHotServerMiddleware = require('webpack-hot-server-middleware');
-const config = require('./webpack.config.js');
+const config = require('../webpack.config.js');
 const app = express();
 
 const compiler = webpack(config);
diff --git a/example/express/server.js b/example/express/server.js
@@ -1,6 +1,6 @@
 const React = require('react');
 const renderToString = require('react-dom/server').renderToString;
-const App = require('./components/App');
+const App = require('../components/App');
 
 module.exports = function serverRenderer({ clientStats, serverStats, foo }) {
     return (req, res, next) => {
diff --git a/example/koa/index.js b/example/koa/index.js
@@ -0,0 +1,48 @@
+const Koa = require('koa');
+const webpack = require('webpack');
+const webpackDevMiddleware = require('webpack-dev-middleware');
+const webpackHotServerMiddleware = require('webpack-hot-server-middleware');
+const config = require('../webpack.config.js');
+const app = new Koa();
+
+// Must point to the koa server renderer.
+config[1].entry = './koa/server';
+
+const compiler = webpack(config);
+
+function koaDevware(dev, compiler) {
+  const waitMiddleware = () =>
+    new Promise((resolve, reject) => {
+      dev.waitUntilValid(() => resolve(true));
+      compiler.plugin('failed', error => reject(error));
+    });
+
+  return async (ctx, next) => {
+    await waitMiddleware();
+    await dev(
+      ctx.req,
+      {
+        end(content) {
+          ctx.body = content;
+        },
+        setHeader: ctx.set.bind(ctx),
+        locals: ctx.state,
+      },
+      next
+    );
+  };
+}
+
+app.use(koaDevware(webpackDevMiddleware(compiler, {
+  noInfo: true
+})));
+app.use(webpackHotServerMiddleware(compiler, {
+  createHandler: webpackHotServerMiddleware.createKoaHandler,
+  serverRendererOptions: {
+  foo: 'Bar'
+  }
+}));
+
+app.listen(6060, () => {
+  console.log('Server started: http://localhost:6060/');
+});
diff --git a/example/koa/server.js b/example/koa/server.js
@@ -0,0 +1,22 @@
+const React = require('react');
+const renderToString = require('react-dom/server').renderToString;
+const App = require('../components/App');
+
+const serverRenderer = ({ clientStats, serverStats, foo }) =>
+  async (ctx, next) => {
+    ctx.body = `
+        <!doctype html>
+        <html>
+        <head>
+            <title>${foo}</title>
+        </head>
+        <body>
+            <div id="root">${renderToString(React.createElement(App))}</div>
+            <script src="/client.js"></script>
+        </body>
+        </html>
+    `;
+    await next();
+  }
+
+module.exports = serverRenderer;
diff --git a/example/package.json b/example/package.json
@@ -4,17 +4,20 @@
   "description": "Example usage of webpack-hot-server-middleware",
   "main": "index.js",
   "scripts": {
-    "start": "node index.js",
+    "start": "npm run start:express",
+    "start:express": "node express/index.js",
+    "start:koa": "node koa/index.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "express": "^4.14.0",
-    "react": "^15.3.2",
-    "react-dom": "^15.3.2",
-    "webpack": "^1.13.2",
-    "webpack-dev-middleware": "^1.8.3",
+    "express": "^4.16.2",
+    "koa": "^2.3.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "webpack": "^3.7.1",
+    "webpack-dev-middleware": "^1.12.0",
     "webpack-hot-server-middleware": "file:../"
   }
 }
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -15,12 +15,12 @@ module.exports = [
     }, {
         name: 'server',
         target: 'node',
-        entry: './server',
+        entry: './express/server',
         output: {
             path: dist,
             filename: 'server.js',
             libraryTarget: 'commonjs2'
         },
         devtool: 'source-map'
     }
-];
+];
diff --git a/src/index.js b/src/index.js
@@ -6,9 +6,26 @@ const requireFromString = require('require-from-string');
 const MultiCompiler = require('webpack/lib/MultiCompiler');
 const sourceMapSupport = require('source-map-support');
 
+const createConnectHandler = (error, serverRenderer) => (req, res, next) => {
+    debug(`Receive request ${req.url}`);
+    if (error) {
+        return next(error);
+    }
+    serverRenderer(req, res, next);
+};
+
+const createKoaHandler = (error, serverRenderer) => (ctx, next) => {
+    debug(`Receive request ${ctx.url}`);
+    if (error) {
+        ctx.throw(error);
+    }
+    return serverRenderer(ctx, next);
+};
+
 const DEFAULTS = {
     chunkName: 'main',
-    serverRendererOptions: {}
+    serverRendererOptions: {},
+    createHandler: createConnectHandler,
 };
 
 function interopRequireDefault(obj) {
@@ -129,13 +146,11 @@ function webpackHotServerMiddleware(multiCompiler, options) {
         }
     });
 
-    return (req, res, next) => {
-        debug(`Receive request ${req.url}`);
-        if (error) {
-            return next(error);
-        }
-        serverRenderer(req, res, next);
+    return function () {
+        return options.createHandler(error, serverRenderer).apply(null, arguments);
     };
 }
 
+Object.assign(webpackHotServerMiddleware, { createConnectHandler, createKoaHandler });
+
 module.exports = webpackHotServerMiddleware;
