Update dependencies

pangolinjs · Jul 15, 2018 · 1c4f2ea · 1c4f2ea
1 parent 44268bd
commit 1c4f2ea
Showing 14 changed files with 4,492 additions and 4,762 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,6 +1,9 @@
 {
   "root": true,
-  "plugins": ["ava"],
+  "parser": "babel-eslint",
+  "plugins": [
+    "ava"
+  ],
   "extends": [
     "standard",
     "plugin:ava/recommended"

diff --git a/README.md b/README.md
@@ -71,22 +71,6 @@ For more information take a look at the [docs](https://pangolinjs.org).
 yarn lint
 # or
 npm run lint
-
-# Pseudo automated testing
-yarn test
-# or
-npm run test
-
-# Dev server and build testing
-yarn test:dev
-yarn test:build
-yarn test:build:dev
-yarn test:build:proto
-# or
-npm run test:dev
-npm run test:build
-npm run test:build:dev
-npm run test:build:proto
 ```
 
 

diff --git a/docs/build.js b/docs/build.js
@@ -39,14 +39,16 @@ config.module
       .loader('css-loader')
       .options({
         importLoaders: 2,
-        minimize: true,
         sourceMap: true
       })
       .end()
     .use('postcss-loader')
       .loader('postcss-loader')
       .options({
-        plugins: [require('autoprefixer')()],
+        plugins: [
+          require('autoprefixer')(),
+          require('cssnano')()
+        ],
         sourceMap: true
       })
       .end()

diff --git a/lib/commands/dev.js b/lib/commands/dev.js
@@ -1,5 +1,6 @@
 const chalk = require('chalk')
 const chokidar = require('chokidar')
+const fullReload = require('../utils/full-reload')
 const generateConfig = require('../config/generate')
 const generateImports = require('../html/generate-imports')
 const getConfig = require('../utils/get-config')
@@ -11,27 +12,9 @@ const opn = require('opn')
 const path = require('path')
 const serve = require('webpack-serve')
 const serveStatic = require('koa-static')
-const webpack = require('webpack')
-const WebSocket = require('ws')
 
 const triggerRE = /(\.njk|\.temp\/(components|prototypes)\.js|docs\.md)$/
 
-/**
- * Broadcast a full reload via WebSocket
- * @param {number} url WebSocket URL
- */
-function fullReload (url) {
-  const ws = new WebSocket(url)
-  const data = {
-    type: 'broadcast',
-    data: { type: 'window-reload' }
-  }
-
-  ws.on('open', () => {
-    ws.send(JSON.stringify(data))
-  })
-}
-
 /**
  * Determine a full page reload
  * @param {string[]} files List of changed files
@@ -55,60 +38,62 @@ module.exports = async function () {
   metadata.startup(context)
   const config = generateConfig(context)
 
-  // Import dev server config and get a free port
-  const devServerConfig = getConfig(context, 'webpack.js').devServer || {}
-  const port = await getPort(process.env.PORT || devServerConfig.port)
-  const wsPort = await getPort(port + 1)
-
-  const serverURL = `http://localhost:${port}`
-  const wsURL = `ws://localhost:${wsPort}`
+  // Import dev server config
+  const serverConfig = getConfig(context, 'webpack.js').devServer || {}
 
-  // Create webpack compiler
-  const compiler = webpack(config)
+  // Get free ports for server and socket
+  const serverPort = await getPort(process.env.PORT || serverConfig.port)
+  const serverURL = `http://localhost:${serverPort}`
+  const webSocketPort = await getPort(serverPort + 1)
+  const webSocketURL = `ws://localhost:${webSocketPort}`
 
-  // Start dev server
-  serve({
+  // Create webpack-serve config
+  const webpackServeConfig = {
     clipboard: false,
-    compiler,
-    dev: { logLevel: 'silent' },
-    hot: { logLevel: 'silent', port: wsPort },
+    config,
+    devMiddleware: { logLevel: 'silent' },
+    hotClient: { logLevel: 'silent', port: webSocketPort },
     logLevel: 'error',
-    port,
+    port: serverPort,
     add (app) {
       const tempPath = path.join(__dirname, '../../docs/dist')
-      app.use(mount('/pangolin', serveStatic(tempPath)))
-
       const assetsPath = path.join(context, 'src/assets')
+
+      app.use(mount('/pangolin', serveStatic(tempPath)))
       app.use(mount('/assets', serveStatic(assetsPath)))
     }
-  }).then(server => {
-    let isFirstCompile = true
-
-    server.on('build-finished', ({ stats, compiler }) => {
-      if (stats.hasErrors()) return
-
-      if (isFirstCompile) {
-        isFirstCompile = false
+  }
 
-        if (devServerConfig.open) {
-          opn(serverURL, { app: devServerConfig.browser })
-        }
-      } else {
-        if (shouldReload(Object.keys(compiler.watchFileSystem.watcher.mtimes))) {
-          fullReload(wsURL)
+  // Start dev server
+  serve({}, webpackServeConfig)
+    .then(server => {
+      let isFirstCompile = true
+
+      server.on('build-finished', ({ stats, compiler }) => {
+        if (stats.hasErrors()) return
+
+        if (isFirstCompile) {
+          isFirstCompile = false
+
+          if (serverConfig.open) {
+            opn(serverURL, { app: serverConfig.browser })
+          }
+        } else {
+          if (shouldReload(Object.keys(compiler.watchFileSystem.watcher.mtimes))) {
+            fullReload(webSocketURL)
+          }
         }
-      }
 
-      console.log(chalk`Pangolin dev server listening at {cyan ${serverURL}}`)
+        console.log(chalk`Pangolin dev server listening at {cyan ${serverURL}}`)
+      })
     })
-  })
 
   /**
    * Execute on file addition
    * @param {string} file File path
    * @param {'components'|'prototypes'} type Page type
    */
-  function addFile (file, type) {
+  function handleAdd (file, type) {
     const filePath = path.join(context, file)
 
     metadata.updateFile(normalizePath(filePath))
@@ -120,32 +105,32 @@ module.exports = async function () {
    * @param {string} file File path
    * @param {'components'|'prototypes'} type Page type
    */
-  function unlinkFile (file, type) {
+  function handleUnlink (file, type) {
     const filePath = path.join(context, file)
 
     metadata.deleteFile(normalizePath(filePath))
     generateImports[type](context)
   }
 
-  const chokidarOptions = {
+  const chokidarConfig = {
     cwd: context,
     ignoreInitial: true
   }
 
   // Watch for component changes
   chokidar
-    .watch('src/components/**/docs.md', chokidarOptions)
-    .on('add', file => addFile(file, 'components'))
-    .on('unlink', file => unlinkFile(file, 'components'))
+    .watch('src/components/**/docs.md', chokidarConfig)
+    .on('add', file => handleAdd(file, 'components'))
+    .on('unlink', file => handleUnlink(file, 'components'))
 
   // Watch for Nunjucks changes
   chokidar
-    .watch('src/**/*.njk', chokidarOptions)
-    .on('add', file => addFile(file, 'prototypes'))
-    .on('unlink', file => unlinkFile(file, 'prototypes'))
+    .watch('src/**/*.njk', chokidarConfig)
+    .on('add', file => handleAdd(file, 'prototypes'))
+    .on('unlink', file => handleUnlink(file, 'prototypes'))
 
   // Watch for asset changes
   chokidar
-    .watch('src/assets/**', chokidarOptions)
-    .on('all', () => fullReload(wsURL))
+    .watch('src/assets/**', chokidarConfig)
+    .on('all', () => fullReload(webSocketURL))
 }
diff --git a/lib/config/base.js b/lib/config/base.js
@@ -37,12 +37,6 @@ module.exports = context => {
         .end()
       .use('babel-loader')
         .loader('babel-loader')
-        .end()
-      .use('eslint-loader')
-        .loader('eslint-loader')
-        .options({
-          formatter: require('eslint/lib/formatters/codeframe')
-        })
 
   config.module
     .rule('css')

diff --git a/lib/config/build.js b/lib/config/build.js
@@ -16,19 +16,22 @@ const outputPaths = {
  * @returns {Object} webpack-chain object
  */
 module.exports = context => {
+  const componentsEntry = generateImports.components(context)
+  const prototypesEntry = generateImports.prototypes(context)
+
   const config = require('./base')(context)
 
   /* eslint-disable indent */
 
   if (process.env.PANGOLIN_ENV === 'build:dev') {
     config.entry('main')
-      .add(generateImports.components(context))
-      .add(generateImports.prototypes(context))
+      .add(componentsEntry)
+      .add(prototypesEntry)
   }
 
   if (process.env.PANGOLIN_ENV === 'build:proto') {
     config.entry('main')
-      .add(generateImports.prototypes(context))
+      .add(prototypesEntry)
   }
 
   config.output
@@ -56,11 +59,6 @@ module.exports = context => {
         .loader(CSSExtractPlugin.loader)
         .before('css-loader')
         .end()
-      .use('css-loader')
-        .tap(options => ({
-          ...options,
-          minimize: { mergeRules: false }
-        }))
 
   config
     .plugin('friendly-errors')

diff --git a/lib/config/dev.js b/lib/config/dev.js
@@ -6,13 +6,16 @@ const generateImports = require('../html/generate-imports')
  * @returns {Object} webpack-chain object
  */
 module.exports = context => {
+  const componentsEntry = generateImports.components(context)
+  const prototypesEntry = generateImports.prototypes(context)
+
   const config = require('./base')(context)
 
   /* eslint-disable indent */
 
   config.entry('main')
-    .add(generateImports.components(context))
-    .add(generateImports.prototypes(context))
+    .add(componentsEntry)
+    .add(prototypesEntry)
 
   config
     .mode('development')
@@ -21,10 +24,11 @@ module.exports = context => {
   config.module
     .rule('js')
       .use('eslint-loader')
-        .tap(options => ({
-          ...options,
-          emitWarning: true
-        }))
+        .loader('eslint-loader')
+        .options({
+          emitWarning: true,
+          formatter: require('eslint/lib/formatters/codeframe')
+        })
 
   config.module
     .rule('css')

diff --git a/lib/utils/full-reload.js b/lib/utils/full-reload.js
@@ -0,0 +1,17 @@
+const WebSocket = require('ws')
+
+/**
+ * Broadcast a full reload via WebSocket
+ * @param {string} url WebSocket URL
+ */
+module.exports = function (url) {
+  const webSocket = new WebSocket(url)
+  const data = {
+    type: 'broadcast',
+    data: { type: 'window-reload' }
+  }
+
+  webSocket.on('open', () => {
+    webSocket.send(JSON.stringify(data))
+  })
+}