0.3.0

CHANGELOG.md

@@ -1,6 +1,11 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+## [0.3.0] - 2018-05-09
+**Breaking Change** - The library is now only a middleware, use it with the provided options of `add` with the optional additional middleware options (see README.md for details).
+- No need for adding a plugin anymore (happens from within the middleware initialization)
+- Added support for multiple webpack ocnfigurations (changed 3 predefined themes)
+
 ## [0.2.0] - 2018-05-06
 **Breaking Change** - the middleware is now a factory, and needs to be invoked to get the koa middleware.
 i.e. `app.use(webpackServeWaitpage.middleware());`

README.md

@@ -19,43 +19,23 @@ yarn
 yarn add -D webpack-serve-waitpage
 ```
 
-## Themes
-
-There are other themes to choose from:
-
-Dark
-
-![Dark](screenshot3.png)
-
-Material
-
-![Material](screenshot2.png)
-
-### *** And you can also create your own! ***
-See **Developing a new template** below
-
 ## Usage
 
 #### webpack.config.js
-```js
-const webpackServeWaitpage = require('./libs/webpack-serve-waitpage');
 
-...
-  plugins: [
+Inside the `add` option function of `serve` add the following line.
+You can provide options for the middleware (as 2nd parameter) `(i.e. app.use(webpackServeWaitpage(options, {})))` or ommit it as in the example below:
 
-    // inside the plugins section of the config add the following
-    webpackServeWaitpage.plugin,
-  ],
+```js
+const webpackServeWaitpage = require('./libs/webpack-serve-waitpage');
 
 ...
 
 module.exports.serve = {
   add: (app, middleware, options) => {
+    ...
 
-    // inside the add option function of serve add the following line
-    // you can provide options for the middleware, or ommit it as below:
-    app.use(webpackServeWaitpage.middleware());
-
+    app.use(webpackServeWaitpage(options)); // * Be sure to pass the options argument from the arguments
   }
 };
 
@@ -71,6 +51,21 @@ module.exports.serve = {
 
 * Any other option would be passed to the global scope of the ejs template
 
+
+## Themes
+
+There are other themes to choose from:
+
+Dark
+
+![Dark](screenshot3.png)
+
+Material
+
+![Material](screenshot2.png)
+
+### *** And you can also create your own! ***
+
 ### Developing a new template
 
 You can clone this repository and use the script `test` to help you develop a new template.
@@ -86,12 +81,14 @@ The `ejs` renderer gets a data object with the following values:
     title: "Development Server", // the window title
     webpackVersion: "4.0.0", // currently used webpack version
     webpackServeVersion: "1.0.0", // currently used webpack-serve version
-    progress: [
+    progress: [ // number of object as number of webpack configurations
+      [
         0.5, // progress between 0 to 1
         "message", // message from webpack
         "0/1000", // modules progress message
         "0 active", // active modules message
         "<some path>" // path of current module
+      ]
     ]
 }
 ```

dark.ejs

@@ -33,18 +33,21 @@
   <li><b>webpack</b> v<%= webpackVersion %></li>
   <li><b>webpack-serve</b> v<%= webpackServeVersion %></li>
 </ul>
-<% var percent = Math.round(100 * progress[0]); %>
+<%
+for (var i = 0 ; i < progress.length ; i++) {
+  var percent = Math.round(100 * progress[i][0]); %>
 <b>Building:</b> <progress value="<%= percent %>" max="100"><%= percent %> %</progress> <%= percent %>%
 <p>
   <code>
-    <span class="message"><%= progress[1] || '' %></span>
-    <span class="modules"><%= progress[2] || '' %></span>
-    <span class="active"><%= progress[3] || '' %></span>
-    <% for (var i = 4 ; i < progress.length; i++) { %>
-      <br/>
-      <span class="last"><%= progress[i] || '' %></span>
+    <span class="message"><%= progress[i][1] || '' %></span>
+    <span class="modules"><%= progress[i][2] || '' %></span>
+    <span class="active"><%= progress[i][3] || '' %></span>
+    <% for (var m = 4 ; m < progress[i].length; m++) { %>
+    <br/>
+    <span class="last"><%= progress[i][m] || '' %></span>
     <% } %>
   </code>
 </p>
+<% } %>
 </body>
 </html>

default.ejs

@@ -31,18 +31,21 @@
   <li><b>webpack</b> v<%= webpackVersion %></li>
   <li><b>webpack-serve</b> v<%= webpackServeVersion %></li>
 </ul>
-<% var percent = Math.round(100 * progress[0]); %>
+<%
+for (var i = 0 ; i < progress.length ; i++) {
+  var percent = Math.round(100 * progress[i][0]); %>
 <b>Building:</b> <progress value="<%= percent %>" max="100"><%= percent %> %</progress> <%= percent %>%
 <p>
   <code>
-    <span class="message"><%= progress[1] || '' %></span>
-    <span class="modules"><%= progress[2] || '' %></span>
-    <span class="active"><%= progress[3] || '' %></span>
-    <% for (var i = 4 ; i < progress.length; i++) { %>
+    <span class="message"><%= progress[i][1] || '' %></span>
+    <span class="modules"><%= progress[i][2] || '' %></span>
+    <span class="active"><%= progress[i][3] || '' %></span>
+    <% for (var m = 4 ; m < progress[i].length; m++) { %>
       <br/>
-      <span class="last"><%= progress[i] || '' %></span>
+      <span class="last"><%= progress[i][m] || '' %></span>
     <% } %>
   </code>
 </p>
+<% } %>
 </body>
 </html>

index.js

@@ -7,37 +7,41 @@ const webpackServe = require('webpack-serve/package.json');
 const data = {
   webpackVersion: webpack.version,
   webpackServeVersion: webpackServe.version,
-  progress: [0],
+  progress: [[0]],
 };
 
 const defaultOptions = {
   title: 'Development Server',
   theme: 'default'
 };
 
-const waitPageMiddleware = {
-  plugin: new webpack.ProgressPlugin(function(percentage) { data.progress = arguments; }),
+const webpackServeWaitpage = (wsOptions, inputOptions) => {
+  if (!wsOptions || !wsOptions.compiler)
+    throw new Error(`webpack-serve options must be supplied as first parameter`);
 
-  middleware: inputOptions => {
-    const options = Object.assign({}, defaultOptions, inputOptions);
-    let template = options.template;
-    if (!template) {
-      if (fs.readdirSync(__dirname).filter(x => x.endsWith('.ejs')).map(x => x.slice(0,-4)).indexOf(options.theme) < 0)
-        throw new Error(`Unknown theme provided: ${options.theme}`);
-      template = fs.readFileSync(path.resolve(__dirname, options.theme + '.ejs'), 'utf8');
-    }
-    Object.keys(options).forEach(key => data[key] = options[key]); // expend data with options
-
-    return async (ctx, next) => {
-      if (
-        data.progress[0] === 1 || // already valid
-        ctx.method !== 'GET' || // request is not a browser GET
-        ctx.body != null || ctx.status !== 404) // response was already handled
-        return await next();
-      ctx.type = 'html';
-      ctx.body = ejs.render(template, data);
-    };
+  const compilers = wsOptions.compiler.compilers || [wsOptions.compiler];
+  for (let i = 0 ; i < compilers.length ; i++) {
+    const progressPlugin = new webpack.ProgressPlugin(function(percentage) { data.progress[i] = arguments; });
+    progressPlugin.apply(compilers[i]);
+  }
+  const options = Object.assign({}, defaultOptions, inputOptions);
+  let template = options.template;
+  if (!template) {
+    if (fs.readdirSync(__dirname).filter(x => x.endsWith('.ejs')).map(x => x.slice(0,-4)).indexOf(options.theme) < 0)
+      throw new Error(`Unknown theme provided: ${options.theme}`);
+    template = fs.readFileSync(path.resolve(__dirname, options.theme + '.ejs'), 'utf8');
   }
+  Object.keys(options).forEach(key => data[key] = options[key]); // expend data with options
+
+  return async (ctx, next) => {
+    if (
+      data.progress.every(p => p[0] === 1) || // already valid
+      ctx.method !== 'GET' || // request is not a browser GET
+      ctx.body != null || ctx.status !== 404) // response was already handled
+      return await next();
+    ctx.type = 'html';
+    ctx.body = ejs.render(template, data);
+  };
 };
 
-module.exports = waitPageMiddleware;
+module.exports = webpackServeWaitpage;

material.ejs

@@ -1,4 +1,3 @@
-<% var percent = Math.round(100 * progress[0]); %>
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -35,26 +34,33 @@
       padding: 20px;
       box-shadow: 2px 2px 5px rgba(0,0,0,0.26);
     }
-    .loader {
+    .building {
+      font-style: italic;
+      font-weight: bold;
+    }
+<% for (var i = 0 ; i < progress.length ; i++) { %>
+    .loader--<%= i %> {
+      margin-top: 20px;
       position: relative;
       left: 37%;
     }
-    .loader circle {
+    .loader--<%= i %> circle {
       fill: transparent;
       stroke-width: 10px;
       stroke-dasharray: 250;
     }
-    .loader circle.progress {
+    .loader--<%= i %> circle.progress {
       stroke: #03A9F4; /* Light Blue 500 */
-      stroke-dashoffset: <%= 250 + Math.round(250 * progress[0]) %>;
+      stroke-dashoffset: <%= 250 + Math.round(250 * progress[i][0]) %>;
     }
-    .loader circle.bar {
+    .loader--<%= i %> circle.bar {
       stroke: #EEEEEE; /* Grey 200 */
     }
-    .loader text {
+    .loader--<%= i %> text {
       text-align: center;
       font: 20px -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, sans-serif;
     }
+<% } %>
     .message {
       text-align: center;
       padding: 0;
@@ -71,15 +77,17 @@
   </ul>
   <p>Redirecting to <a id="url" href="#"></a></p>
   <script>var u = document.getElementById('url'); u.href = location.href; u.innerText = location.href;</script>
-  <h4><i>Your application is building...</i></h4>
-  <svg class="loader" height="100" width="100">
+  <div class="building"><b><i>Your application is building...</i></b></div>
+  <% for (var i = 0 ; i < progress.length ; i++) { %>
+  <svg class="loader--<%= i %>" height="100" width="100">
     <circle class="bar" cx="50" cy="50" r="40"></circle>
     <circle class="progress" cx="50" cy="50" r="40"></circle>
-    <text x="53" y="55" text-anchor="middle"><%= percent %>%</text>
+    <text x="53" y="55" text-anchor="middle"><%= Math.round(100 * progress[i][0]) %>%</text>
   </svg>
-  <div class="message"><b><%= progress[1] || '' %></b></div>
-  <% for (var i = 2 ; i < progress.length; i++) { %>
-  <div class="message"><%= progress[i] || '' %></div>
+  <div class="message"><b><%= progress[0][1] || '' %></b></div>
+  <% for (var m = 2 ; m < progress[i].length; m++) { %>
+  <div class="message"><%= progress[i][m] || '' %></div>
+  <% } %>
   <% } %>
 </div>
 </body>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "webpack-serve-waitpage",
   "description": "Webpack progress wait page for webpack-serve",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "main": "index.js",
   "repository": "https://github.com/elisherer/webpack-serve-waitpage.git",
   "author": "Eli Sherer <eli.sherer@gmail.com>",

test/SlowDownWebpackPlugin.js

@@ -0,0 +1,18 @@
+function SlowDownWebpackPlugin(seconds = 1) {
+  this.seconds = seconds;
+}
+SlowDownWebpackPlugin.prototype.apply = function(compiler) {
+  compiler.hooks.make.tapAsync("SlowDownWebpackPlugin", async (compilation, callback) => {
+    let progress = 0;
+    let interval = setInterval(async () => {
+      progress += 1 / this.seconds;
+
+      if (progress >= 1) {
+        clearInterval(interval);
+        callback();
+      }
+    }, 1000);
+  });
+};
+
+module.exports = SlowDownWebpackPlugin;

test/testMiddleware.js

@@ -3,8 +3,9 @@ const path = require('path');
 const ejs = require('ejs');
 const webpack = require('webpack');
 const webpackServe = require('webpack-serve/package.json');
+const SlowDownWebpackPlugin = require('./SlowDownWebpackPlugin');
 
-module.exports = (indexFilename) => {
+module.exports = (wsOptions, indexFilename, seconds = 2) => {
   const indexFile = path.resolve(__dirname, '..', indexFilename);
 
   const state = {
@@ -25,21 +26,24 @@ module.exports = (indexFilename) => {
     state.progress = (state.progress + 0.1) % 1;
   }, 1000);
 
+  // delay
+  const compilers = wsOptions.compiler.compilers || [wsOptions.compiler];
+  for (let i = 0 ; i < compilers.length ; i++) {
+    const slowDownPlugin = new SlowDownWebpackPlugin(seconds);
+    slowDownPlugin.apply(compilers[i]);
+  }
+
   return async (ctx/*, next*/) => {
     const total = 200, active = Math.round(total * state.progress);
-    try {
-      ctx.type = 'html';
-      ctx.body = ejs.render(state.template, {
-        title: 'Development Server (Test)',
-        webpackVersion: webpack.version,
-        webpackServeVersion: webpackServe.version,
-        progress: [state.progress, 'Building Modules', active + '/200 modules', active + ' active', './' + indexFilename]
-      });
-    } catch (err) {
-      console.error('>> ' + err);
-      if (err.status !== 404) {
-        throw err
-      }
-    }
+    ctx.type = 'html';
+    ctx.body = ejs.render(state.template, {
+      title: 'Development Server (Test)',
+      webpackVersion: webpack.version,
+      webpackServeVersion: webpackServe.version,
+      progress: [
+        [state.progress, 'Building Modules', active + '/200 modules', active + ' active', './' + indexFilename],
+        //[(state.progress + 0.1) % 1, 'Building Modules', (active + 1) + '/200 modules', (active + 1) + ' active', './' + indexFilename] // test for multiple compilers
+      ]
+    });
   }
 };