fix(*): use webpack config from options completely

BREAKING CHANGE: `webpackLazyMode` option is now incompatible with webpack plugins, which split one chunk into multiple. Either switch it off or exclude such plugins from your config from gemini tests.
researchgate · Nov 11, 2016 · b733188 · b733188
1 parent 0ee4d6c
commit b733188
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 25 deletions.
diff --git a/lib/html-template.js b/lib/html-template.js
@@ -1,13 +1,25 @@
 'use strict';
+
 /**
  * @param {String[]} fileList
  */
 function renderCss(fileList) {
     return fileList.reduce(
-        (html, url) => html + `\n<link rel="stylesheet" href=${url}>`,
+        (html, url) => html + `\n<link rel="stylesheet" href=${url} />`,
+        ''
+    );
+}
+
+/**
+ * @param {String[]} fileList
+ */
+function renderJs(fileList) {
+    return fileList.reduce(
+        (html, url) => html + `\n<script src=${url}></script>`,
         ''
     );
 }
+
 function render(templateData) {
     return (
 `<!DOCTYPE html>
@@ -18,7 +30,7 @@ function render(templateData) {
 <body>
     <div data-gemini-react style="display: inline-block;">
     </div>
-    <script src='${templateData.jsUrl}'></script>
+    ${renderJs(templateData.jsList)}
 </body>`
     );
 }

diff --git a/lib/route-builder.js b/lib/route-builder.js
@@ -20,6 +20,7 @@ class RouteBuilder {
         this._suiteStack = [{
             name: '',
             url: '',
+            js: [],
             css: []
         }];
     }
@@ -61,6 +62,7 @@ class RouteBuilder {
         return {
             fullName: getFullName(top.fullName, name),
             url: `${top.url}/${encodeURIComponent(name)}`,
+            js: _.clone(top.js),
             css: _.clone(top.css)
         };
     }
@@ -78,6 +80,7 @@ class RouteBuilder {
         this._existingRoutes[top.url] = {
             title: top.fullName,
             jsUrl: this._currentJsUrl,
+            jsList: top.js.concat(this._currentJsUrl),
             cssList: top.css
         };
 
@@ -86,16 +89,20 @@ class RouteBuilder {
 
     /**
      * @param {String} url
-     * @returns {Boolean}
+     * @return {Boolean}
      */
     isUrlRegistered(url) {
         return _.has(this._existingRoutes, url);
     }
 
     /**
      * @param {String} url
+     * @param {Object} assets
+     * @return {Object}
      */
-    getTemplateDataFromUrl(url) {
+    getTemplateDataFromUrl(url, commonAssets) {
+        this._existingRoutes[url].jsList = _.union(commonAssets, this._existingRoutes[url].jsList);
+
         return this._existingRoutes[url];
     }
 }

diff --git a/lib/router.js b/lib/router.js
@@ -1,4 +1,5 @@
 'use strict';
+const _ = require('lodash');
 const htmlTemplate = require('./html-template');
 const log = require('debug')('gemini:react');
 
@@ -26,10 +27,19 @@ function testPathToChunkUrl(testPath) {
  */
 function middleware(routeBuilder) {
     return function middleware(req, res, next) {
+        const commonAssetsObj = _.omitBy(
+            res.locals.webpackStats.toJson().assetsByChunkName,
+            value => /\.bundle.js$/.test(value)
+        );
+        const commonAssets = Object.keys(commonAssetsObj).reduce((result, item) => {
+            result.push(assetsRoot() + commonAssetsObj[item]);
+            return result;
+        }, []);
+
         log(`request to ${req.path}`);
         if (routeBuilder.isUrlRegistered(req.path)) {
             log('this is a test page url');
-            const templateData = routeBuilder.getTemplateDataFromUrl(req.path);
+            const templateData = routeBuilder.getTemplateDataFromUrl(req.path, commonAssets);
             log('template data', templateData);
             res.send(htmlTemplate(templateData));
         }

diff --git a/lib/server.js b/lib/server.js
@@ -110,9 +110,9 @@ class Server {
     }
 
     _setupMiddleware() {
-        this._app.use(router.middleware(this._routeBuilder));
-        this._bundlerMiddleware = this._bundler.buildMiddlewhare(router.assetsRoot());
+        this._bundlerMiddleware = this._bundler.buildMiddleware(router.assetsRoot());
         this._app.use(this._bundlerMiddleware);
+        this._app.use(router.middleware(this._routeBuilder));
         this._customizeServer(this._app, express);
         if (this._staticRoot) {
             this._app.use(express.static(this._staticRoot));

diff --git a/lib/webpack-bundler.js b/lib/webpack-bundler.js
@@ -1,36 +1,25 @@
 'use strict';
+const _ = require('lodash');
 const webpack = require('webpack');
 const webpackMiddleware = require('webpack-dev-middleware');
 
-function readWebpackLoaders(filepath) {
+function readWebpackConfig(filepath) {
     let config = require(filepath);
     if (typeof config === 'function') {
         config = config();
     }
-    return config.module.loaders;
-}
-
-function readWebpackResolve(filepath) {
-    let config = require(filepath);
-    if (typeof config === 'function') {
-        config = config();
-    }
-    return config.resolve;
+    return config;
 }
 
 class WebpackBundler {
     constructor(options) {
-        this._webpackConfig = {
-            module: {
-                loaders: readWebpackLoaders(options.webpackConfig)
-            },
+        this._webpackConfig = _.assign({}, readWebpackConfig(options.webpackConfig), {
             entry: {},
             output: {
                 path: '/',
                 filename: '[name]'
-            },
-            resolve: readWebpackResolve(options.webpackConfig)
-        };
+            }
+        });
         this._lazy = options.webpackLazyMode;
     }
 
@@ -41,9 +30,10 @@ class WebpackBundler {
     /**
      * @param {String} mountUrl
      */
-    buildMiddlewhare(mountUrl) {
+    buildMiddleware(mountUrl) {
         this._webpackConfig.output.publicPath = mountUrl;
         return webpackMiddleware(webpack(this._webpackConfig), {
+            serverSideRender: true,
             publicPath: mountUrl,
             noInfo: true,
             quiet: true,