anypack-plugin-serve 0.1.0-alpha.1

package/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.
+*/
+
+/**
+ * @note This file exists merely as an easy reference for folks adding it to their configuration entries
+ */
+
+(() => {
+  const { run } = require('./lib/client/client');
+  let hash = '<unknown>';
+  let options;
+  try {
+    options = ʎɐɹɔosǝʌɹǝs;
+  } catch (e) {
+    const { log } = require('./lib/client/log');
+    log.error(
+      'The entry for webpack-plugin-serve was included in your build, but it does not appear that the plugin was. Please check your configuration.'
+    );
+  }
+
+  try {
+    hash = __webpack_hash__;
+  } catch (e) {}
+
+  run(hash, options);
+})();

package/lib/client/ClientSocket.js

@@ -0,0 +1,97 @@
+/*
+  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 { error, refresh, warn } = require('./log')();
+
+// ignore 1008 (HTTP 400 equivalent) and 1011 (HTTP 500 equivalent)
+const ignoreCodes = [1008, 1011];
+const maxAttempts = 10;
+
+class ClientSocket {
+  constructor(options, ...args) {
+    this.args = args;
+    this.attempts = 0;
+    this.eventHandlers = [];
+    this.options = options;
+    this.retrying = false;
+
+    this.connect();
+  }
+
+  addEventListener(...args) {
+    this.eventHandlers.push(args);
+    this.socket.addEventListener(...args);
+  }
+
+  close() {
+    this.socket.close();
+  }
+
+  connect() {
+    if (this.socket) {
+      delete this.socket;
+    }
+
+    this.connecting = true;
+
+    this.socket = new WebSocket(...this.args);
+
+    if (this.options.retry) {
+      this.socket.addEventListener('close', (event) => {
+        if (ignoreCodes.includes(event.code)) {
+          return;
+        }
+
+        if (!this.retrying) {
+          warn(`The WebSocket was closed and will attempt to reconnect`);
+        }
+
+        this.reconnect();
+      });
+    } else {
+      this.socket.onclose = () =>
+        warn(`The client WebSocket was closed. ${refresh}`);
+    }
+
+    this.socket.addEventListener('open', () => {
+      this.attempts = 0;
+      this.retrying = false;
+    });
+
+    if (this.eventHandlers.length) {
+      for (const [name, fn] of this.eventHandlers) {
+        this.socket.addEventListener(name, fn);
+      }
+    }
+  }
+
+  reconnect() {
+    this.attempts += 1;
+    this.retrying = true;
+
+    if (this.attempts > maxAttempts) {
+      error(`The WebSocket could not be reconnected. ${refresh}`);
+      this.retrying = false;
+      return;
+    }
+
+    const timeout = 1000 * this.attempts ** 2;
+
+    setTimeout(() => this.connect(this.args), timeout);
+  }
+
+  removeEventListener(...args) {
+    const [, handler] = args;
+    this.eventHandlers = this.eventHandlers.filter(([, fn]) => fn === handler);
+    this.socket.removeEventListener(...args);
+  }
+}
+
+module.exports = { ClientSocket };

package/lib/client/client.js

@@ -0,0 +1,114 @@
+/*
+  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 run = (buildHash, options) => {
+  const { address, client = {}, hmr, progress, secure, status } = options;
+
+  options.firstInstance = !window.webpackPluginServe;
+
+  window.webpackPluginServe = window.webpackPluginServe || {
+    compilers: {},
+  };
+  window.webpackPluginServe.silent = !!client.silent;
+
+  const { ClientSocket } = require('./ClientSocket');
+  const { replace } = require('./hmr');
+  const { error, info, warn } = require('./log')();
+
+  const protocol = secure ? 'wss' : 'ws';
+  const socket = new ClientSocket(
+    client,
+    `${client.protocol || protocol}://${client.address || address}/wps`,
+  );
+
+  const { compilerName } = options;
+
+  window.webpackPluginServe.compilers[compilerName] = {};
+
+  // prevents ECONNRESET errors on the server
+  window.addEventListener('beforeunload', () => socket.close());
+
+  socket.addEventListener('message', (message) => {
+    const { action, data = {} } = JSON.parse(message.data);
+    const { errors, hash = '<?>', warnings } = data || {};
+    const shortHash = hash.slice(0, 7);
+    const identifier = options.compilerName
+      ? `(Compiler: ${options.compilerName}) `
+      : '';
+    const compiler = window.webpackPluginServe.compilers[compilerName];
+    const { wpsId } = data;
+
+    switch (action) {
+      case 'build':
+        compiler.done = false;
+        break;
+      case 'connected':
+        info(`WebSocket connected ${identifier}`);
+        break;
+      case 'done':
+        compiler.done = true;
+        break;
+      case 'problems':
+        if (data.errors.length) {
+          error(`${identifier}Build ${shortHash} produced errors:\n`, errors);
+        }
+        if (data.warnings.length) {
+          warn(
+            `${identifier}Build ${shortHash} produced warnings:\n`,
+            warnings,
+          );
+        }
+        break;
+      case 'reload':
+        window.location.reload();
+        break;
+      case 'replace':
+        // actions with a wpsId in tow indicate actions that should only be executed when the wpsId sent
+        // matches the wpsId set in options. this is how we can identify multiple compilers in the
+        // client.
+        if (wpsId && wpsId === options.wpsId) {
+          replace(buildHash, hash, hmr === 'refresh-on-failure');
+        }
+        break;
+      default:
+    }
+  });
+
+  if (options.firstInstance) {
+    if (progress === 'minimal') {
+      const { init } = require('./overlays/progress-minimal');
+      init(options, socket);
+    } else if (progress) {
+      const { init } = require('./overlays/progress');
+      init(options, socket);
+    }
+
+    if (status) {
+      const { init } = require('./overlays/status');
+      init(options, socket);
+    }
+
+    if (module.hot) {
+      info('Hot Module Replacement is active');
+
+      if (options.liveReload) {
+        info('Live Reload taking precedence over Hot Module Replacement');
+      }
+    } else {
+      warn('Hot Module Replacement is inactive');
+    }
+
+    if (!module.hot && options.liveReload) {
+      info('Live Reload is active');
+    }
+  }
+};
+
+module.exports = { run };

package/lib/client/hmr.js

@@ -0,0 +1,83 @@
+/*
+  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 { error, info, refresh, warn } = require('./log')();
+
+let latest = true;
+
+const hmr = (onFailure) => {
+  return {
+    onUnaccepted(data) {
+      onFailure();
+      warn('Change in unaccepted module(s):\n', data);
+      warn(data);
+    },
+    onDeclined(data) {
+      onFailure();
+      warn('Change in declined module(s):\n', data);
+    },
+    onErrored(data) {
+      onFailure();
+      error('Error in module(s):\n', data);
+    },
+  };
+};
+
+const replace = async (buildHash, hash, refreshOnFailure) => {
+  const { apply, check, status } = module.hot;
+
+  if (hash) {
+    latest = hash.includes(buildHash);
+  }
+
+  if (!latest) {
+    const hmrStatus = status();
+
+    if (hmrStatus === 'abort' || hmrStatus === 'fail') {
+      warn(`An HMR update was triggered, but ${hmrStatus}ed. ${refresh}`);
+      return;
+    }
+
+    let modules;
+
+    try {
+      modules = await check(false);
+    } catch (_e) {
+      // noop. this typically happens when a MultiCompiler has more than one compiler that includes
+      // this script, and an update happens with a hash that isn't part of the compiler/module this
+      // instance was loaded for.
+      return;
+    }
+
+    if (!modules) {
+      warn(`No modules found for replacement. ${refresh}`);
+      return;
+    }
+
+    modules = await apply(
+      hmr(
+        refreshOnFailure
+          ? () => {
+              if (refreshOnFailure) {
+                location.reload();
+              }
+            }
+          : () => {},
+      ),
+    );
+
+    if (modules) {
+      latest = true;
+      info(`Build ${hash.slice(0, 7)} replaced:\n`, modules);
+    }
+  }
+};
+
+module.exports = { replace };

package/lib/client/log.js

@@ -0,0 +1,25 @@
+/*
+  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 { error, info, warn } = console;
+const log = {
+  error: error.bind(console, '⬡ wps:'),
+  info: info.bind(console, '⬡ wps:'),
+  refresh: 'Please refresh the page',
+  warn: warn.bind(console, '⬡ wps:'),
+};
+const noop = () => {};
+const silent = {
+  error: noop,
+  info: noop,
+  warn: noop,
+};
+
+module.exports = () => (window.webpackPluginServe.silent ? silent : log);

package/lib/client/overlays/progress-minimal.js

@@ -0,0 +1,118 @@
+/*
+  Copyright © 2018 Andrew Powell, Matheus Gonçalves da Silva
+
+  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 { addCss, addHtml } = require('./util');
+
+const ns = 'wps-progress-minimal';
+const html = `
+<div id="${ns}" class="${ns}-hidden">
+  <div id="${ns}-bar"></div>
+</div>
+`;
+const css = `
+#${ns} {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 4px;
+  width: 100vw;
+  z-index: 2147483645;
+}
+
+#${ns}-bar {
+  width: 0%;
+  height: 4px;
+  background-color: rgb(186, 223, 172);
+}
+
+@keyframes ${ns}-fade {
+	0% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0;
+	}
+}
+
+.${ns}-disappear {
+  animation: ${ns}-fade .3s;
+  animation-fill-mode: forwards;
+  animation-delay: .5s;
+}
+
+.${ns}-hidden {
+  display: none;
+}
+`;
+
+let hideOnPageVisible = false;
+
+const update = (percent) => {
+  const bar = document.querySelector(`#${ns}-bar`);
+  bar.style.width = `${percent}%`;
+};
+
+const reset = (wrapper) => {
+  wrapper.classList.add(`${ns}-disappear`);
+};
+
+const init = (options, socket) => {
+  if (options.firstInstance) {
+    document.addEventListener('DOMContentLoaded', () => {
+      addCss(css);
+      addHtml(html);
+
+      const wrapper = document.querySelector(`#${ns}`);
+      wrapper.addEventListener('animationend', () => {
+        update(0);
+        wrapper.classList.add(`${ns}-hidden`);
+      });
+    });
+
+    document.addEventListener('visibilitychange', () => {
+      if (!document.hidden && hideOnPageVisible) {
+        const wrapper = document.querySelector(`#${ns}`);
+        reset(wrapper);
+        hideOnPageVisible = false;
+      }
+    });
+  }
+
+  socket.addEventListener('message', (message) => {
+    const { action, data } = JSON.parse(message.data);
+
+    if (action !== 'progress') {
+      return;
+    }
+
+    const percent = Math.floor(data.percent * 100);
+    const wrapper = document.querySelector(`#${ns}`);
+
+    if (wrapper) {
+      wrapper.classList.remove(`${ns}-hidden`, `${ns}-disappear`);
+    }
+
+    if (data.percent === 1) {
+      if (document.hidden) {
+        hideOnPageVisible = true;
+      } else {
+        reset(wrapper);
+      }
+    } else {
+      hideOnPageVisible = false;
+    }
+
+    update(percent);
+  });
+};
+
+module.exports = {
+  init,
+};

package/lib/client/overlays/progress.js

@@ -0,0 +1,170 @@
+/*
+  Copyright © 2018 Andrew Powell, Matheus Gonçalves da Silva
+
+  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 { addCss, addHtml } = require('./util');
+
+const ns = 'wps-progress';
+const css = `
+#${ns}{
+  width: 200px;
+  height: 200px;
+  position: fixed;
+  right: 5%;
+  top: 5%;
+  transition: opacity .25s ease-in-out;
+  z-index: 2147483645;
+}
+
+#${ns}-bg {
+  fill: #282d35;
+}
+
+#${ns}-fill {
+  fill: rgba(0, 0, 0, 0);
+  stroke: rgb(186, 223, 172);
+  stroke-dasharray: 219.99078369140625;
+  stroke-dashoffset: -219.99078369140625;
+  stroke-width: 10;
+  transform: rotate(90deg)translate(0px, -80px);
+}
+
+#${ns}-percent {
+  font-family: 'Open Sans';
+  font-size: 18px;
+  fill: #ffffff;
+}
+
+#${ns}-percent-value {
+  dominant-baseline: middle;
+  text-anchor: middle;
+}
+
+#${ns}-percent-super {
+  fill: #bdc3c7;
+  font-size: .45em;
+  baseline-shift: 10%;
+}
+
+.${ns}-noselect {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: default;
+}
+
+@keyframes ${ns}-fade {
+	0% {
+		opacity: 1;
+		transform: scale(1);
+		-webkit-transform: scale(1);
+	}
+	100% {
+		opacity: 0;
+		transform: scale(0);
+		-webkit-transform: scale(0);
+	}
+}
+
+.${ns}-disappear {
+  animation: ${ns}-fade .3s;
+  animation-fill-mode:forwards;
+  animation-delay: .5s;
+}
+
+.${ns}-hidden {
+  display: none;
+}
+
+/* Put google web font at the end, or you'll see FOUC in Firefox */
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
+`;
+
+const html = `
+<svg id="${ns}" class="${ns}-noselect ${ns}-hidden" x="0px" y="0px" viewBox="0 0 80 80">
+  <circle id="${ns}-bg" cx="50%" cy="50%" r="35"></circle>
+  <path id="${ns}-fill" d="M5,40a35,35 0 1,0 70,0a35,35 0 1,0 -70,0" />
+  <text id="${ns}-percent" x="50%" y="51%"><tspan id="${ns}-percent-value">0</tspan><tspan id="${ns}-percent-super">%</tspan></text>
+</svg>
+`;
+
+let hideOnPageVisible = false;
+
+const update = (percent) => {
+  const max = -219.99078369140625;
+  const value = document.querySelector(`#${ns}-percent-value`);
+  const track = document.querySelector(`#${ns}-fill`);
+  const offset = ((100 - percent) / 100) * max;
+
+  track.setAttribute('style', `stroke-dashoffset: ${offset}`);
+  value.innerHTML = percent.toString();
+};
+
+const reset = (svg) => {
+  svg.classList.add(`${ns}-disappear`);
+};
+
+const init = (options, socket) => {
+  if (options.firstInstance) {
+    document.addEventListener('DOMContentLoaded', () => {
+      addCss(css);
+      addHtml(html);
+
+      // Reset progress to zero after disappear animation
+      const svg = document.querySelector(`#${ns}`);
+      svg.addEventListener('animationend', () => {
+        update(0);
+        svg.classList.add(`${ns}-hidden`);
+      });
+    });
+
+    document.addEventListener('visibilitychange', () => {
+      if (!document.hidden && hideOnPageVisible) {
+        const svg = document.querySelector(`#${ns}`);
+        reset(svg);
+        hideOnPageVisible = false;
+      }
+    });
+  }
+
+  socket.addEventListener('message', (message) => {
+    const { action, data } = JSON.parse(message.data);
+
+    if (action !== 'progress') {
+      return;
+    }
+
+    const percent = Math.floor(data.percent * 100);
+    const svg = document.querySelector(`#${ns}`);
+
+    if (!svg) {
+      return;
+    }
+
+    // we can safely call this even if it doesn't have the class
+    svg.classList.remove(`${ns}-disappear`, `${ns}-hidden`);
+
+    if (data.percent === 1) {
+      if (document.hidden) {
+        hideOnPageVisible = true;
+      } else {
+        reset(svg);
+      }
+    } else {
+      hideOnPageVisible = false;
+    }
+
+    update(percent);
+  });
+};
+
+module.exports = { init };