chore: implementing sockets

Author: shellscape

.eslintrc

@@ -1,3 +1,7 @@
 {
-  "extends": "shellscape"
+  "extends": "shellscape",
+  "globals": {
+    "WebSocket": true,
+    "window": true
+  }
 }

.gitignore

@@ -5,3 +5,4 @@ node_modules
 
 output.js
 output.js.map
+*.hot-update.*

lib/builtins.js

@@ -1,9 +1,21 @@
+/*
+  Copyright © 2018 Andrew Powell
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+  The above copyright notice and this permission notice shall be
+  included in all copies or substantial portions of this Source Code Form.
+*/
 const convert = require('koa-connect');
 const historyApiFallback = require('connect-history-api-fallback');
 const koaCompress = require('koa-compress');
 const koaStatic = require('koa-static');
 const onetime = require('onetime');
 
+const { middleware: wsMiddleware } = require('./ws');
+
 // TODO: add proxy
 
 const getBuiltins = (app, options) => {
@@ -27,10 +39,13 @@ const getBuiltins = (app, options) => {
     }
   };
 
+  const websocket = () => app.use(wsMiddleware);
+
   return {
     compress: onetime(compress),
     historyFallback: onetime(historyFallback),
-    static: onetime(statik)
+    static: onetime(statik),
+    websocket: onetime(websocket)
   };
 };
 

lib/client.js

@@ -0,0 +1,34 @@
+/*
+  Copyright © 2018 Andrew Powell
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+  The above copyright notice and this permission notice shall be
+  included in all copies or substantial portions of this Source Code Form.
+*/
+(() => {
+  // eslint-disable-next-line no-undef, no-unused-vars
+  const options = ʎɐɹɔosǝʌɹǝs;
+  const { info, warn } = console;
+  const socket = new WebSocket('ws://[::]:55555/wps');
+
+  // prevents ECONNRESET errors on the server
+  window.addEventListener('beforeunload', () => socket.close());
+
+  socket.onmessage = (message) => {
+    const { action, data } = JSON.parse(message.data);
+    switch (action) {
+      case 'connected':
+        info('⬡ wps: WebSocket connected');
+        break;
+      case 'invalid':
+        info(data);
+        break;
+      default:
+    }
+  };
+
+  socket.onclose = () => warn(`⬡ wps: The client WebSocket was closed. Please refresh the page.`);
+})();

lib/index.js

@@ -9,41 +9,46 @@
   included in all copies or substantial portions of this Source Code Form.
 */
 const EventEmitter = require('events');
-const url = require('url');
 
 const Koa = require('koa');
-const open = require('opn');
+const { DefinePlugin, HotModuleReplacementPlugin } = require('webpack');
 
-const { getBuiltins } = require('./builtins');
+const { getLogger } = require('./log');
+const { start } = require('./server');
 
 const defaults = {
   compress: null,
   historyFallback: false,
+  hmr: true,
   host: () => null,
+  log: { level: 'info' },
   middleware: () => {},
-  open: true,
+  open: false,
   port: 55555,
   static: null
 };
 
-// TODO: write a proper logger
-const { warn } = console;
+const key = 'webpack-plugin-serve';
+const newline = () => console.log(); // eslint-disable-line no-console
 
-let instantiated = false;
+let instance = null;
 
+// TODO: test this on a multicompiler setup
 // TODO: https by default
 // TODO: wire up websockets
 // TODO: create client script that connects to the websockets
 class WebpackPluginServe extends EventEmitter {
   constructor(opts) {
-    if (instantiated) {
-      // TODO: expand on this error message
-      warn('webpack-plugin-serve is only meant to be used once per config');
-    }
+    super();
 
-    instantiated = true;
+    if (instance) {
+      instance.log.error(
+        'Duplicate instances created. Only the first instance of this plugin will be active.'
+      );
+      return;
+    }
 
-    super();
+    instance = this;
 
     const options = Object.assign({}, defaults, opts);
 
@@ -63,46 +68,39 @@ class WebpackPluginServe extends EventEmitter {
       options.port = () => usePort;
     }
 
+    this.app = new Koa();
+    this.log = getLogger(options.log || {});
     this.options = options;
   }
 
   apply(compiler) {
-    if (!this.options.static) {
-      this.options.static = [compiler.context];
-    }
+    this.compiler = compiler;
 
-    compiler.hooks.done.tap('WebpackPluginServe', this.start.bind(this));
-  }
-
-  async start() {
-    const app = new Koa();
-    const { host, middleware, port } = this.options;
-    const builtins = getBuiltins(app, this.options);
-    const useHost = await host(); // eslint-disable-line
-    const usePort = await port();
-
-    // allow users to add and manipulate middleware in the config
-    await middleware(app, builtins);
-
-    // call each of the builtin middleware. methods are once'd so this has no ill-effects.
-    for (const fn of Object.values(builtins)) {
-      fn();
+    if (instance !== this) {
+      return;
     }
 
-    // TODO: use app.callback and setup our own server instance
-    const server = app.listen(usePort);
-    // TODO: circle back to this when https is enabled
-    const protocol = 'http';
-    const address = server.address();
+    const { done, watchRun } = compiler.hooks;
 
-    address.hostname = address.address;
-    const uri = `${protocol}://${url.format(address)}`;
+    if (!this.options.static) {
+      this.options.static = [compiler.context];
+    }
 
-    warn('\nListening on:', uri);
+    done.tap(key, start.bind(this));
+    watchRun.tap(key, () => {
+      if (this.listening) {
+        newline();
+      }
+    });
 
-    if (this.options.open) {
-      open(uri, this.options.open === true ? {} : this.options.open);
+    if (this.options.hmr) {
+      const hmrPlugin = new HotModuleReplacementPlugin();
+      hmrPlugin.apply(compiler);
     }
+
+    const defineData = { ʎɐɹɔosǝʌɹǝs: JSON.stringify(this.options) };
+    const definePlugin = new DefinePlugin(defineData);
+    definePlugin.apply(compiler);
   }
 }
 

lib/log.js

@@ -0,0 +1,46 @@
+/*
+  Copyright © 2018 Andrew Powell
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+  The above copyright notice and this permission notice shall be
+  included in all copies or substantial portions of this Source Code Form.
+*/
+const chalk = require('chalk');
+const loglevel = require('loglevelnext');
+
+const symbols = { ok: '⬡', whoops: '⬢' };
+const colors = {
+  trace: 'cyan',
+  debug: 'magenta',
+  info: 'blue',
+  warn: 'yellow',
+  error: 'red'
+};
+
+const getLogger = (options) => {
+  const prefix = {
+    level: ({ level }) => {
+      const color = colors[level];
+      const symbol = ['error', 'warn'].includes(level) ? symbols.whoops : symbols.ok;
+      return chalk[color](`${symbol} wps: `);
+    },
+    template: '{{level}}'
+  };
+
+  if (options.timestamp) {
+    prefix.template = `[{{time}}] ${prefix.template}`;
+  }
+
+  /* eslint-disable no-param-reassign */
+  options.prefix = prefix;
+  options.name = 'webpack-plugin-serve';
+
+  const log = loglevel.create(options);
+
+  return log;
+};
+
+module.exports = { getLogger };

lib/routes.js

@@ -0,0 +1,52 @@
+/*
+  Copyright © 2018 Andrew Powell
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+  The above copyright notice and this permission notice shall be
+  included in all copies or substantial portions of this Source Code Form.
+*/
+const router = require('koa-route');
+
+const key = 'webpack-plugin-serve';
+
+const prep = (data) => JSON.stringify(data);
+
+const setupRoutes = function setupRoutes() {
+  const { app, compiler } = this;
+  const { invalid } = compiler.hooks;
+  const connect = async (ctx) => {
+    if (ctx.ws) {
+      const socket = await ctx.ws();
+
+      socket.invalid = (filePath = '<unknown>') => {
+        if (socket.readyState === 3) {
+          return;
+        }
+
+        const context = compiler.context || compiler.options.context || process.cwd();
+        const fileName = filePath.replace(context, '');
+
+        socket.send(prep({ action: 'invalid', data: { fileName } }));
+      };
+
+      // we do this because webpack caches and optimizes the hooks, so there's no way to detach a
+      // listener/hook.
+      invalid.tap(key, (filePath) => this.emit('invalid', filePath));
+
+      this.on('invalid', socket.invalid);
+
+      socket.on('close', () => {
+        this.removeListener('invalid', socket.invalid);
+      });
+
+      socket.send(prep({ action: 'connected' }));
+    }
+  };
+
+  app.use(router.get('/wps', connect));
+};
+
+module.exports = { setupRoutes };

lib/server.js

@@ -0,0 +1,60 @@
+/*
+  Copyright © 2018 Andrew Powell
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+  The above copyright notice and this permission notice shall be
+  included in all copies or substantial portions of this Source Code Form.
+*/
+const url = require('url');
+
+const open = require('opn');
+
+const { getBuiltins } = require('./builtins');
+const { setupRoutes } = require('./routes');
+
+const newline = () => console.log(); // eslint-disable-line no-console
+
+const start = async function start() {
+  if (this.listening) {
+    return;
+  }
+
+  const { app } = this;
+  const { host, middleware, port } = this.options;
+  const builtins = getBuiltins(app, this.options);
+  const useHost = await host(); // eslint-disable-line
+  const usePort = await port();
+
+  // allow users to add and manipulate middleware in the config
+  await middleware(app, builtins);
+
+  // call each of the builtin middleware. methods are once'd so this has no ill-effects.
+  for (const fn of Object.values(builtins)) {
+    fn();
+  }
+
+  setupRoutes.bind(this)();
+
+  // TODO: use app.callback and setup our own server instance
+  const server = app.listen(usePort);
+  this.listening = true;
+
+  // TODO: circle back to this when https is enabled
+  const protocol = 'http';
+  const address = server.address();
+
+  address.hostname = address.address;
+  const uri = `${protocol}://${url.format(address)}`;
+
+  newline();
+  this.log.info('Server Listening on:', uri);
+
+  if (this.options.open) {
+    open(uri, this.options.open === true ? {} : this.options.open);
+  }
+};
+
+module.exports = { start };