[WIP] add webpack-dev-middleware

lib/config.js

@@ -5,7 +5,6 @@ const union = require('lodash.union')
 const merge = require('lodash.merge')
 const {accessSync} = require('fs')
 const hygienist = require('hygienist-middleware')
-const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
 const SpikePlugin = require('./plugin')
 const SpikeUtils = require('spike-util')
 
@@ -63,7 +62,6 @@ module.exports = class Config {
       module: Joi.object().default().keys({
         rules: Joi.array().default([])
       }),
-      devServer: Joi.func(),
       server: Joi.object().default().keys({
         watchOptions: Joi.object().default().keys({
           ignored: Joi.array().default('node_modules')
@@ -141,9 +139,11 @@ module.exports = class Config {
     res.server.files = [{
       match: allWatchedFiles,
       fn: (event, file) => {
+        console.log(event, file)
         const util = new SpikeUtils(this)
         const f = path.join(this.context, file.replace(p, ''))
         const opts = util.getSpikeOptions()
+        console.log(opts.files.all.indexOf(f))
         if (opts.files.all.indexOf(f) < 0 && !util.isFileIgnored(f) && event !== 'addDir') {
           opts.project.watcher.watch([], [], [f])
         }
@@ -185,9 +185,7 @@ module.exports = class Config {
     }
 
     // this is sometimes necessary for webpackjsonp loads in old browsers
-    if (opts.outputPublicPath) {
-      this.output.publicPath = opts.outputPublicPath
-    }
+    this.output.publicPath = opts.outputPublicPath || this.output.path
 
     this.resolveLoader = {
       modules: [
@@ -239,16 +237,19 @@ module.exports = class Config {
 
     const util = new SpikeUtils(this)
     const spikePlugin = new SpikePlugin(util, spike)
+    const server2 = (_, bs) => {
+      if (bs.utils.devIp.length) {
+        spike.project.emit('info', `External IP: http://${bs.utils.devIp[0]}:${spike.server.port}`)
+      }
+    }
+
+    // set custom dev server options
+    this.customDevServer = [opts.server, server2]
 
     this.plugins = [
       ...opts.plugins,
       spikePlugin,
-      ...opts.afterSpikePlugins,
-      new BrowserSyncPlugin(opts.server, { callback: (_, bs) => {
-        if (bs.utils.devIp.length) {
-          spike.project.emit('info', `External IP: http://${bs.utils.devIp[0]}:${spike.server.port}`)
-        }
-      } })
+      ...opts.afterSpikePlugins
     ]
 
     return this

lib/index.js

@@ -13,6 +13,8 @@ const webpack = require('webpack')
 const rimraf = require('rimraf')
 const Sprout = require('sprout')
 const Joi = require('joi')
+const browserSync = require('browser-sync')
+const webpackDevMiddleware = require('webpack-dev-middleware')
 const {EventEmitter} = require('events')
 const Config = require('./config')
 const {Error, Warning} = require('./errors')
@@ -26,7 +28,10 @@ const {Error, Warning} = require('./errors')
 class Spike extends EventEmitter {
   constructor (opts = {}) {
     super()
-    this.config = new Config(opts, this)
+    const config = new Config(opts, this)
+    this.devServer = config.customDevServer
+    delete config.customDevServer
+    this.config = config
   }
 
   /**
@@ -51,12 +56,35 @@ class Spike extends EventEmitter {
    * @fires Spike#compile
    * @return {Object} watch id, webpack watcher
    */
+
   watch (opts = {}) {
     const id = uuid()
     this.compiler = webpack(this.config)
-    const watcher = this.compiler.watch(opts, compileCallback.bind(this, id))
-    this.watcher = watcher
-    return {id, watcher}
+
+    // add webpack dev middleware
+    const devMiddleware = webpackDevMiddleware(this.compiler, {
+      publicPath: this.config.output.publicPath,
+      stats: false,
+      overlay: true,
+      watchOptions: opts,
+      quiet: true,
+      compilerCallback: compileCallback.bind(this, id)
+    })
+    this.devServer[0].middleware.unshift(devMiddleware)
+
+    // TODO: A couple issues here. First, for some reason the watcher
+    // is not picking up new files, although it's detecting changes to
+    // existing files. Second, it's not writing the public folder.
+    // These changes are confusing as we're using the same thing exactly
+    // under the hood, but we'll figure it out!
+
+    // run browsersync server
+    if (!this.browserSync) this.browserSync = browserSync.create()
+    this.browserSync.init(this.devServer[0], this.devServer[1])
+
+    // return the middleware watcher and id
+    this.watcher = devMiddleware.watcher
+    return {id, watcher: this.watcher}
   }
 
   /**
@@ -165,9 +193,7 @@ function npmInstall (opts) {
  * @fires Spike#compile
  */
 function compileCallback (id, err, stats) {
-  if (err) {
-    return this.emit('error', new Error({ id, err }))
-  }
+  if (err) { return this.emit('error', new Error({ id, err })) }
   // Webpack "soft errors" are classified as warnings in spike. An error is
   // an error. If it doesn't break the build, it's a warning.
   const cstats = stats.compilation
@@ -178,7 +204,6 @@ function compileCallback (id, err, stats) {
   if (cstats.warnings.length) {
     this.emit('warning', new Warning({ id, err: cstats.warnings[0] }))
   }
-
   this.emit('compile', {id, stats})
 }
 

package.json

@@ -29,10 +29,11 @@
     "spike-util": "^1.3.0",
     "sprout": "^1.2.1",
     "webpack": "^3.2.0",
+    "webpack-dev-middleware": "^1.11.0",
     "when": "^3.7.8"
   },
   "devDependencies": {
-    "ava": "^0.20.0",
+    "ava": "^0.21.0",
     "chalk": "^2.0.1",
     "coveralls": "^2.13.1",
     "husky": "^0.14.3",

test/watch.js

@@ -7,7 +7,8 @@ const {fixturesPath} = require('./_helpers')
 test.cb('watches the project, reloads on modification', (t) => {
   const project = new Spike({
     root: path.join(fixturesPath, 'watch'),
-    server: { open: false }
+    server: { open: false },
+    entry: { main: './index.js' }
   })
   let i = 0
 
@@ -32,7 +33,8 @@ test.cb('watches the project, reloads on modification', (t) => {
 test.cb('incorporates new file when added while watching', (t) => {
   const project = new Spike({
     root: path.join(fixturesPath, 'watch'),
-    server: { open: false }
+    server: { open: false },
+    entry: { main: './index.js' }
   })
   let i = 0
   const testFile = path.join(fixturesPath, 'watch/test.html')