feat & refactor: webpack-serve-waitpage and lint

lib/core/blogPost.js

@@ -1,13 +1,13 @@
-import React from 'react';
+import React from 'react';
-import blogDatas from '@generated/blogDatas';
+import blogDatas from '@generated/blogDatas';
-
+
-// inner blog component for the article itself, without sidebar/header/footer
+// inner blog component for the article itself, without sidebar/header/footer
-class BlogPost extends React.Component {
+class BlogPost extends React.Component {
-  render() {
+  render() {
-    const {match} = this.props;
+    const {match} = this.props;
-    const post = blogDatas.find(blog => blog.path === match.path);
+    const post = blogDatas.find(blog => blog.path === match.path);
-    return <div className="post">{post && post.content}</div>;
+    return <div className="post">{post && post.content}</div>;
-  }
+  }
-}
+}
-
+
-module.exports = BlogPost;
+module.exports = BlogPost;

lib/core/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import {render} from 'react-dom';
 import {BrowserRouter, Route, Switch, Link} from 'react-router-dom';
-import BlogPost from './blogPost';
 import blogDatas from '@generated/blogDatas';
+import BlogPost from './blogPost';
 
 class App extends React.Component {
   render() {
@@ -15,13 +15,11 @@ class App extends React.Component {
             ))}
           </Switch>
           <div>
-            {blogDatas.map(({path}) => {
+            {blogDatas.map(({path}) => (
-              return (
+              <div key={path}>
-                <div key={path}>
+                <Link to={path}>{path}</Link>
-                  <Link to={path}>{path}</Link>
+              </div>
-                </div>
+              ))}
-              );
-            })}
           </div>
         </div>
       </BrowserRouter>

lib/dev.js

@@ -5,19 +5,20 @@ const webpack = require('webpack');
 const chokidar = require('chokidar');
 const convert = require('koa-connect');
 const range = require('koa-range');
+const mount = require('koa-mount');
 const serveStatic = require('koa-static');
 const history = require('connect-history-api-fallback');
 const portfinder = require('portfinder');
 const serve = require('webpack-serve');
+const serveWaitpage = require('webpack-serve-waitpage');
 const webpackNiceLog = require('webpack-nicelog');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const load = require('./loader');
 const createDevConfig = require('./webpack/dev');
 
 async function getPort(port) {
-  portfinder.basePort = parseInt(port) || 8080;
+  portfinder.basePort = parseInt(port, 10) || 8080;
-  port = await portfinder.getPortPromise();
+  return await portfinder.getPortPromise();
-  return port;
 }
 
 module.exports = async function dev(sourceDir, cliOptions = {}) {
@@ -72,7 +73,7 @@ module.exports = async function dev(sourceDir, cliOptions = {}) {
   const compiler = webpack(config);
 
   // webpack-serve
-  const nonExistentDir = path.resolve(__dirname, 'non-existent')
+  const nonExistentDir = path.resolve(__dirname, 'non-existent');
   await serve(
     {},
     {
@@ -88,11 +89,12 @@ module.exports = async function dev(sourceDir, cliOptions = {}) {
       },
       logLevel: 'error',
       port,
-      add: app => {
+      add: (app, middleware, options) => {
         const staticDir = path.resolve(sourceDir, 'public');
         if (fs.existsSync(staticDir)) {
           app.use(mount(publicPath, serveStatic(staticDir)));
         }
+        app.use(serveWaitpage(options, {theme: 'dark'})); // https://github.com/elisherer/webpack-serve-waitpage#middleware-options
         app.use(range); // enable range request https://tools.ietf.org/html/rfc7233
         app.use(
           convert(

lib/helpers/generate.js

@@ -1,14 +1,14 @@
-const path = require('path');
+const path = require('path');
-const fs = require('fs-extra');
+const fs = require('fs-extra');
-
+
-const genPath = path.resolve(__dirname, '../generated');
+const genPath = path.resolve(__dirname, '../generated');
-fs.ensureDirSync(genPath);
+fs.ensureDirSync(genPath);
-
+
-const genCache = new Map();
+const genCache = new Map();
-module.exports = async function(file, content) {
+module.exports = async function(file, content) {
-  const cached = genCache.get(file);
+  const cached = genCache.get(file);
-  if (cached !== content) {
+  if (cached !== content) {
-    await fs.writeFile(path.join(genPath, file), content);
+    await fs.writeFile(path.join(genPath, file), content);
-    genCache.set(file, content);
+    genCache.set(file, content);
-  }
+  }
-};
+};

lib/webpack/base.js

@@ -10,7 +10,9 @@ module.exports = function createBaseConfig(props) {
   config
     .mode(isProd ? 'production' : 'development')
     .output.path(outDir)
-    .filename(isProd ? 'static/js/[name].[chunkhash].js' : 'static/js/[name].js')
+    .filename(
+      isProd ? 'static/js/[name].[chunkhash].js' : 'static/js/[name].js'
+    )
     .publicPath(isProd ? publicPath : '/');
 
   config.resolve

package.json

@@ -52,6 +52,7 @@
     "globby": "^8.0.1",
     "html-webpack-plugin": "^3.2.0",
     "koa-connect": "^2.0.1",
+    "koa-mount": "^3.0.0",
     "koa-range": "^0.3.0",
     "koa-static": "^5.0.0",
     "portfinder": "^1.0.13",
@@ -62,7 +63,8 @@
     "webpack": "^4.16.3",
     "webpack-chain": "^4.8.0",
     "webpack-nicelog": "^1.0.1",
-    "webpack-serve": "^2.0.2"
+    "webpack-serve": "^2.0.2",
+    "webpack-serve-waitpage": "^1.0.1"
   },
   "engines": {
     "node": ">=8"

test/loader/__fixtures__/custom/config.js

@@ -1,6 +1,6 @@
-module.exports = {
+module.exports = {
-  title: 'Hello World',
+  title: 'Hello World',
-  description: 'Hello World',
+  description: 'Hello World',
-  dest: 'blogi',
+  dest: 'blogi',
-  base: 'blogi'
+  base: 'blogi'
-};
+};

test/loader/__fixtures__/simple/config.js

@@ -1,4 +1,4 @@
-module.exports = {
+module.exports = {
-  title: 'Hello World',
+  title: 'Hello World',
-  description: 'Hello World'
+  description: 'Hello World'
-};
+};

yarn.lock

@@ -1797,7 +1797,7 @@ date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
 
-debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.3, debug@^2.6.6, debug@^2.6.8, debug@^2.6.9:
+debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.1, debug@^2.6.3, debug@^2.6.6, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   dependencies:
@@ -2055,6 +2055,10 @@ ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
+ejs@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.6.1.tgz#498ec0d495655abc6f23cd61868d926464071aa0"
+
 electron-to-chromium@^1.3.47:
   version "1.3.52"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.52.tgz#d2d9f1270ba4a3b967b831c40ef71fb4d9ab5ce0"
@@ -3983,7 +3987,7 @@ kleur@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-2.0.1.tgz#7cc64b0d188d0dcbc98bdcdfdda2cc10619ddce8"
 
-koa-compose@^3.0.0:
+koa-compose@^3.0.0, koa-compose@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/koa-compose/-/koa-compose-3.2.1.tgz#a85ccb40b7d986d8e5a345b3a1ace8eabcf54de7"
   dependencies:
@@ -4008,6 +4012,13 @@ koa-is-json@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/koa-is-json/-/koa-is-json-1.0.0.tgz#273c07edcdcb8df6a2c1ab7d59ee76491451ec14"
 
+koa-mount@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/koa-mount/-/koa-mount-3.0.0.tgz#08cab3b83d31442ed8b7e75c54b1abeb922ec197"
+  dependencies:
+    debug "^2.6.1"
+    koa-compose "^3.2.1"
+
 koa-range@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/koa-range/-/koa-range-0.3.0.tgz#3588e3496473a839a1bd264d2a42b1d85bd7feac"
@@ -6610,6 +6621,12 @@ webpack-nicelog@^1.0.1:
     ora "^3.0.0"
     react-dev-utils "^5.0.1"
 
+webpack-serve-waitpage@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/webpack-serve-waitpage/-/webpack-serve-waitpage-1.0.1.tgz#8aee5bf8aafcf997c72a74fc48ae1c495001fde9"
+  dependencies:
+    ejs "^2.6.1"
+
 webpack-serve@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/webpack-serve/-/webpack-serve-2.0.2.tgz#6263b7c2888e169f84105da2119079098512b404"