refactor: dev optimizations

client/js/app.js

@@ -56,7 +56,6 @@ import adminEditUserComponent from './pages/admin-edit-user.component.js'
 import adminProfileComponent from './pages/admin-profile.component.js'
 import adminSettingsComponent from './pages/admin-settings.component.js'
 import adminThemeComponent from './pages/admin-theme.component.js'
-import setupComponent from './components/setup.component.js'
 import contentViewComponent from './pages/content-view.component.js'
 import editorComponent from './components/editor.component.js'
 import sourceViewComponent from './pages/source-view.component.js'
@@ -130,7 +129,7 @@ Vue.component('modalUpgradeSystem', modalUpgradeSystemComponent)
 Vue.component('navigator', navigatorComponent)
 Vue.component('pageLoader', pageLoaderComponent)
 Vue.component('search', searchComponent)
-Vue.component('setup', setupComponent)
+Vue.component('setup', () => import(/* webpackChunkName: "setup" */ './components/setup.component.js'))
 Vue.component('sourceView', sourceViewComponent)
 Vue.component('toggle', toggleComponent)
 Vue.component('tree', treeComponent)

dev/webpack/webpack.common.js

@@ -5,6 +5,7 @@ const webpack = require('webpack')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const ProgressBarPlugin = require('progress-bar-webpack-plugin')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const NameAllModulesPlugin = require('name-all-modules-plugin')
 
 const babelConfig = fs.readJsonSync(path.join(process.cwd(), '.babelrc'))
 const postCSSConfig = {
@@ -182,6 +183,13 @@ module.exports = {
       { from: 'client/static' }
     ], {
 
+    }),
+    new webpack.NamedModulesPlugin(),
+    new webpack.NamedChunksPlugin((chunk) => {
+      if (chunk.name) {
+        return chunk.name
+      }
+      return chunk.modules.map(m => path.relative(m.context, m.request)).join('_')
     }),
     new webpack.optimize.CommonsChunkPlugin({
       name: 'vendor',
@@ -190,9 +198,10 @@ module.exports = {
       }
     }),
     new webpack.optimize.CommonsChunkPlugin({
-      name: 'manifest',
+      name: 'runtime',
       minChunks: Infinity
-    })
+    }),
+    new NameAllModulesPlugin()
   ],
   resolve: {
     symlinks: true,

dev/webpack/webpack.dev.js

@@ -1,6 +1,5 @@
 const webpack = require('webpack')
 const merge = require('webpack-merge')
-const path = require('path')
 
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 

dev/webpack/webpack.prod.js

@@ -4,6 +4,7 @@ const merge = require('webpack-merge')
 const CleanWebpackPlugin = require('clean-webpack-plugin')
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin')
 
 const common = require('./webpack.common.js')
 
@@ -19,6 +20,7 @@ module.exports = merge(common, {
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production')
     }),
-    new ExtractTextPlugin('css/bundle.css')
+    new ExtractTextPlugin('css/bundle.css'),
+    new DuplicatePackageCheckerPlugin()
   ]
 })

package.json

@@ -43,32 +43,32 @@
     "bcryptjs-then": "1.0.1",
     "bluebird": "3.5.1",
     "body-parser": "1.18.2",
-    "bugsnag": "2.0.1",
+    "bugsnag": "2.1.3",
-    "bull": "3.3.7",
+    "bull": "3.3.8",
     "bunyan": "1.8.12",
     "cheerio": "1.0.0-rc.2",
     "child-process-promise": "2.2.1",
-    "chokidar": "1.7.0",
+    "chokidar": "2.0.0",
     "compression": "1.7.1",
     "connect-flash": "0.1.1",
-    "connect-redis": "3.3.2",
+    "connect-redis": "3.3.3",
     "cookie-parser": "1.4.3",
-    "diff2html": "2.3.2",
+    "diff2html": "2.3.3",
     "dotize": "^0.2.0",
-    "execa": "0.8.0",
+    "execa": "0.9.0",
     "express": "4.16.2",
     "express-brute": "1.0.1",
     "express-brute-redis": "0.0.1",
     "express-session": "1.15.6",
-    "file-type": "7.4.0",
+    "file-type": "7.5.0",
     "filesize.js": "1.0.2",
-    "follow-redirects": "1.2.6",
+    "follow-redirects": "1.4.1",
     "fs-extra": "5.0.0",
     "git-wrapper2-promise": "0.2.9",
     "graphql": "0.12.3",
-    "graphql-tools": "2.14.1",
+    "graphql-tools": "2.19.0",
     "highlight.js": "9.12.0",
-    "i18next": "10.2.1",
+    "i18next": "10.3.0",
     "i18next-express-middleware": "1.0.9",
     "i18next-localstorage-cache": "1.1.1",
     "i18next-node-fs-backend": "1.0.0",
@@ -76,24 +76,24 @@
     "ioredis": "3.2.2",
     "jimp": "0.2.28",
     "js-yaml": "3.10.0",
-    "jsonwebtoken": "8.1.0",
+    "jsonwebtoken": "8.1.1",
     "klaw": "2.1.1",
     "lodash": "4.17.4",
     "markdown-it": "8.4.0",
     "markdown-it-abbr": "1.0.4",
     "markdown-it-anchor": "4.0.0",
-    "markdown-it-attrs": "1.2.0",
+    "markdown-it-attrs": "1.2.1",
     "markdown-it-emoji": "1.4.0",
     "markdown-it-expand-tabs": "1.0.12",
     "markdown-it-external-links": "0.0.6",
     "markdown-it-footnote": "3.0.1",
     "markdown-it-mathjax": "2.0.0",
     "markdown-it-task-lists": "2.1.0",
-    "mathjax-node": "1.2.1",
+    "mathjax-node": "1.3.0",
     "mime-types": "2.1.17",
     "moment": "2.20.1",
     "moment-timezone": "0.5.14",
-    "mongodb": "3.0.0-rc0",
+    "mongodb": "3.0.1",
     "multer": "1.3.0",
     "node-2fa": "1.1.2",
     "node-graceful": "0.2.3",
@@ -114,67 +114,69 @@
     "passport-windowslive": "1.0.2",
     "pg": "6.4.2",
     "pg-hstore": "2.3.2",
-    "pg-promise": "7.3.2",
+    "pg-promise": "7.4.1",
-    "pm2": "2.9.1",
+    "pm2": "2.9.3",
     "pug": "2.0.0-rc.4",
     "qr-image": "3.2.0",
     "read-chunk": "2.1.0",
     "remove-markdown": "0.2.2",
     "request": "2.83.0",
     "request-promise": "4.2.2",
-    "semver": "5.4.1",
+    "semver": "5.5.0",
-    "sequelize": "4.28.6",
+    "sequelize": "4.32.2",
     "serve-favicon": "2.4.5",
     "simplemde": "1.11.2",
     "stream-to-promise": "2.2.0",
-    "tar": "4.2.0",
+    "tar": "4.3.0",
     "through2": "2.0.3",
-    "uuid": "3.1.0",
+    "uuid": "3.2.1",
-    "validator": "9.2.0",
+    "validator": "9.3.0",
     "validator-as-promised": "1.0.2",
     "winston": "2.4.0",
-    "yargs": "10.0.3"
+    "yargs": "11.0.0"
   },
   "devDependencies": {
     "@glimpse/glimpse": "0.22.15",
     "@panter/vue-i18next": "0.9.1",
-    "apollo-client-preset": "1.0.5",
+    "apollo-client-preset": "1.0.6",
-    "autoprefixer": "7.2.3",
+    "autoprefixer": "7.2.5",
     "babel-cli": "6.26.0",
     "babel-core": "6.26.0",
     "babel-eslint": "8.2.1",
-    "babel-jest": "22.0.4",
+    "babel-jest": "22.1.0",
     "babel-loader": "7.1.2",
     "babel-preset-env": "1.6.1",
     "babel-preset-es2015": "6.24.1",
     "babel-preset-stage-2": "6.24.1",
     "brace": "0.11.0",
     "cache-loader": "1.2.0",
-    "clean-webpack-plugin": "0.1.17",
+    "clean-webpack-plugin": "0.1.18",
     "colors": "1.1.2",
     "consolidate": "0.15.0",
     "copy-webpack-plugin": "4.3.1",
     "css-loader": "0.28.9",
     "cssnano": "4.0.0-rc.2",
-    "eslint": "4.13.1",
+    "duplicate-package-checker-webpack-plugin": "2.1.0",
+    "eslint": "4.16.0",
     "eslint-config-requarks": "1.0.7",
     "eslint-config-standard": "11.0.0-beta.0",
     "eslint-plugin-import": "2.8.0",
     "eslint-plugin-node": "5.2.1",
     "eslint-plugin-promise": "3.6.0",
     "eslint-plugin-standard": "3.0.1",
-    "eslint-plugin-vue": "3.13.1",
+    "eslint-plugin-vue": "4.2.0",
     "extract-text-webpack-plugin": "3.0.2",
     "file-loader": "1.1.6",
     "graphql-tag": "^2.6.1",
-    "i18next-xhr-backend": "1.5.0",
+    "i18next-xhr-backend": "1.5.1",
     "intl": "1.2.5",
-    "jest": "22.0.4",
+    "jest": "22.1.4",
     "jest-junit": "3.4.1",
     "js-cookie": "2.2.0",
+    "name-all-modules-plugin": "1.0.1",
     "node-dev": "3.1.3",
     "node-sass": "4.7.2",
-    "nodemon": "1.14.3",
+    "nodemon": "1.14.11",
     "postcss-loader": "2.0.10",
     "postcss-selector-parser": "3.1.1",
     "progress-bar-webpack-plugin": "1.10.0",
@@ -182,15 +184,15 @@
     "raw-loader": "0.5.1",
     "sass-loader": "6.0.6",
     "sass-resources-loader": "1.3.1",
-    "style-loader": "0.19.1",
+    "style-loader": "0.20.1",
     "svg-sprite-loader": "3.6.2",
     "twemoji-awesome": "1.0.6",
     "typescript": "2.6.2",
-    "uglify-es": "3.2.2",
+    "uglify-es": "3.3.9",
     "uglifyjs-webpack-plugin": "1.1.6",
-    "vee-validate": "2.0.0-rc.27",
+    "vee-validate": "2.0.3",
     "vue": "2.5.13",
-    "vue-clipboards": "1.2.0",
+    "vue-clipboards": "1.2.1",
     "vue-hot-reload-api": "2.2.4",
     "vue-loader": "13.7.0",
     "vue-lodash": "1.0.4",

server/setup.js

@@ -57,6 +57,20 @@ module.exports = () => {
   app.locals.data = wiki.data
   app.locals._ = require('lodash')
 
+  // ----------------------------------------
+  // HMR (Dev Mode Only)
+  // ----------------------------------------
+
+  if (global.DEV) {
+    const webpackDevMiddleware = require('webpack-dev-middleware')
+    const webpackHotMiddleware = require('webpack-hot-middleware')
+    app.use(webpackDevMiddleware(global.WP, {
+      publicPath: global.WPCONFIG.output.publicPath,
+      logger: wiki.logger
+    }))
+    app.use(webpackHotMiddleware(global.WP))
+  }
+
   // ----------------------------------------
   // Controllers
   // ----------------------------------------

server/views/master.pug

@@ -25,7 +25,7 @@ html
     link(type='text/css', rel='stylesheet', href=config.site.path + 'css/bundle.css')
 
     //- JS
-    script(type='text/javascript', src=config.site.path + 'js/manifest.js')
+    script(type='text/javascript', src=config.site.path + 'js/runtime.js')
     script(type='text/javascript', src=config.site.path + 'js/vendor.js')
     script(type='text/javascript', src=config.site.path + 'js/client.js')
 

server/views/setup.pug

@@ -274,7 +274,7 @@ block body
                     i(v-if='loading')
                   .panel-content.is-text
                     .is-logo
-                      svg.icons.is-64: use(xlink:href='#nc-man')
+                      svg.icons.is-64: use(xlink:href='#nc-man-black')
                       h4 Administrator Account
                     p A root administrator account will be created for local authentication. From this account, you can create or authorize more users.
                   .panel-content.form-sections