webpack-dev-service 0.10.0 → 0.10.2

package/esm/client/hot.js

@@ -0,0 +1,106 @@
+/**
+ * @package webpack-dev-service
+ * @license MIT
+ * @version 0.10.2
+ * @author nuintun <nuintun@qq.com>
+ * @description A koa 2 middleware for webpack development and hot reloading.
+ * @see https://github.com/nuintun/webpack-dev-service#readme
+ */
+
+/**
+ * @module hot
+ */
+// Last error.
+let error;
+// Last update hash.
+let hash = __webpack_hash__;
+// HMR status.
+let status = 'idle';
+/**
+ * @function isUpdateAvailable
+ * @description Is there a newer version of this code available.
+ */
+function isUpdateAvailable() {
+  // __webpack_hash__ is the hash of the current compilation.
+  // It's a global variable injected by webpack.
+  return hash !== __webpack_hash__;
+}
+/**
+ * @function setHash
+ * @description Set webpack hash.
+ * @param value - The new hash value.
+ */
+function setHash(value) {
+  hash = value;
+}
+/**
+ * @function setStatus
+ * @description Set hot status.
+ * @param value The new status of the hot update.
+ */
+function setStatus(value) {
+  status = value;
+}
+// Initialize status.
+if (import.meta.webpackHot) {
+  setStatus(import.meta.webpackHot.status());
+}
+/**
+ * @function applyUpdate
+ * @description Apply update.
+ * @param hmr Whether to enable HMR.
+ * @param fallback Fallback function when HMR fail.
+ */
+function applyUpdate(hmr, fallback) {
+  // Update available.
+  if (isUpdateAvailable()) {
+    // HMR enabled.
+    if (hmr && import.meta.webpackHot) {
+      switch (status) {
+        case 'idle':
+          // Set status.
+          setStatus('check');
+          // Auto check and apply updates.
+          import.meta.webpackHot
+            .check(true)
+            .then(updated => {
+              // Update status.
+              setStatus(import.meta.webpackHot.status());
+              // When updated modules is available,
+              // it indicates server is ready to serve new bundle.
+              if (updated) {
+                // While update completed, do it again until no update available.
+                applyUpdate(hmr, fallback);
+              }
+            })
+            .catch(exception => {
+              // Get status.
+              const status = import.meta.webpackHot.status();
+              // Update status.
+              switch (status) {
+                case 'fail':
+                case 'abort':
+                  setStatus(status);
+                default:
+                  setStatus('fail');
+              }
+              // Cache error.
+              error = exception;
+              // Call fallback.
+              fallback(error);
+            });
+          break;
+        case 'fail':
+        case 'abort':
+          // Call fallback.
+          fallback(error);
+          break;
+      }
+    } else {
+      // HMR disabled.
+      fallback();
+    }
+  }
+}
+
+export { applyUpdate, isUpdateAvailable, setHash, setStatus };

package/esm/client/index.js

@@ -0,0 +1,10 @@
+/**
+ * @package webpack-dev-service
+ * @license MIT
+ * @version 0.10.2
+ * @author nuintun <nuintun@qq.com>
+ * @description A koa 2 middleware for webpack development and hot reloading.
+ * @see https://github.com/nuintun/webpack-dev-service#readme
+ */
+
+export { off, on } from './events.js';

package/esm/client/main.js

@@ -0,0 +1,57 @@
+/**
+ * @package webpack-dev-service
+ * @license MIT
+ * @version 0.10.2
+ * @author nuintun <nuintun@qq.com>
+ * @description A koa 2 middleware for webpack development and hot reloading.
+ * @see https://github.com/nuintun/webpack-dev-service#readme
+ */
+
+import createClient from './client.js';
+
+/**
+ * @module main
+ */
+const isTLS = protocol => {
+  return protocol === 'https:';
+};
+const getCurrentScript = () => {
+  const { currentScript } = document;
+  if (currentScript) {
+    return currentScript;
+  }
+};
+const getProtocol = (params, protocol) => {
+  switch (params.get('wss')) {
+    case 'true':
+      return 'wss:';
+    case 'false':
+      return 'ws:';
+    default:
+      return isTLS(protocol) ? 'wss:' : 'ws:';
+  }
+};
+const getOrigin = params => {
+  const { location } = self;
+  const script = getCurrentScript();
+  if (script) {
+    const url = new URL(script.src, location.href);
+    const protocol = getProtocol(params, url.protocol);
+    return `${protocol}//${url.host}`;
+  }
+  const protocol = getProtocol(params, location.protocol);
+  return `${protocol}//${location.host}`;
+};
+const getOptions = () => {
+  const params = new URLSearchParams(__resourceQuery);
+  return {
+    origin: getOrigin(params),
+    hmr: params.get('hmr') !== 'false',
+    path: params.get('path') || '/hot',
+    name: params.get('name') || 'webpack',
+    reload: params.get('reload') !== 'false',
+    overlay: params.get('overlay') !== 'false',
+    progress: params.get('progress') !== 'false'
+  };
+};
+createClient(getOptions());

package/esm/client/ui/overlay.js

@@ -0,0 +1,231 @@
+/**
+ * @package webpack-dev-service
+ * @license MIT
+ * @version 0.10.2
+ * @author nuintun <nuintun@qq.com>
+ * @description A koa 2 middleware for webpack development and hot reloading.
+ * @see https://github.com/nuintun/webpack-dev-service#readme
+ */
+
+import { getRootElement, injectCSS, appendHTML, ansiToHTML } from './utils.js';
+
+/**
+ * @module overlay
+ * @see https://github.com/shellscape/webpack-plugin-serve
+ */
+const OVERLAY = 'wds-overlay';
+const CSS = `
+.${OVERLAY} {
+  top:0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  position: fixed;
+  font-size: 16px;
+  overflow: hidden;
+  font-style: normal;
+  font-weight: normal;
+  z-index: 2147483646;
+  flex-direction: column;
+  box-sizing: border-box;
+  transform-origin: center;
+  background: rgba(0, 0, 0, .85);
+  transform: scale(0) translateZ(0);
+  transition: transform .25s ease-out;
+  font-family: Consolas, "Lucida Console", monospace;
+}
+.${OVERLAY}-show {
+  transform: scale(1) translateZ(0);
+}
+.${OVERLAY}-close {
+  top: 16px;
+  right: 16px;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  position: absolute;
+  border-radius: 16px;
+  background: #ff5f58;
+  display: inline-block;
+  transform-origin: center;
+  box-shadow: #ff5f58 0 0 6px;
+  transform: rotate(0) translateZ(0);
+  transition: transform .25s ease-in-out;
+}
+.${OVERLAY}-close:before,
+.${OVERLAY}-close:after {
+  top: 7px;
+  left: 3px;
+  content: "";
+  width: 10px;
+  height: 2px;
+  position: absolute;
+  background-color: white;
+  transform-origin: center;
+}
+.${OVERLAY}-close:before {
+  transform: rotate(45deg);
+}
+.${OVERLAY}-close:after {
+  transform: rotate(-45deg);
+}
+.${OVERLAY}-close:hover {
+  transform: rotate(180deg) translateZ(0);
+}
+.${OVERLAY}-title {
+  margin: 0;
+  color: #fff;
+  line-height: 16px;
+  text-align: center;
+  background: #282d35;
+  border-radius: 0 0 4px 4px;
+  padding: 16px 48px 16px 16px;
+}
+.${OVERLAY}-name {
+  font-weight: bold;
+  font-style: normal;
+  text-transform: uppercase;
+}
+.${OVERLAY}-errors-title,
+.${OVERLAY}-warnings-title {
+  color: #ff5f58;
+  padding-left: 8px;
+  font-style: normal;
+}
+.${OVERLAY}-warnings-title {
+  color: #ffbd2e;
+}
+.${OVERLAY}-issues {
+  padding: 0 16px;
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  -ms-scroll-chaining: none;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+}
+.${OVERLAY}-issues::-webkit-scrollbar {
+  display: none;
+}
+.${OVERLAY}-errors,
+.${OVERLAY}-warnings {
+  color: #ddd;
+  padding: 16px;
+  margin: 16px 0;
+  display: block;
+  line-height: 1.2;
+  border-radius: 4px;
+  background: #282d35;
+}
+.${OVERLAY}-errors > section + section,
+.${OVERLAY}-warnings > section + section {
+  margin: 16px 0 0;
+}
+.${OVERLAY}-errors > section > em,
+.${OVERLAY}-warnings > section > em {
+  line-height: 1;
+  color: #641e16;
+  padding: 4px 8px;
+  font-style: normal;
+  border-radius: 4px;
+  font-weight: normal;
+  background: #ff5f58;
+  display: inline-block;
+  text-transform: uppercase;
+}
+.${OVERLAY}-warnings > section > em {
+  color: #3e2723;
+  background: #ffbd2e;
+}
+.${OVERLAY}-errors > section > pre,
+.${OVERLAY}-warnings > section > pre {
+  margin: 0;
+  font-size: 14px;
+  font-family: inherit;
+  padding: 8px 0 0 16px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.${OVERLAY}-errors > section > pre a,
+.${OVERLAY}-warnings > section > pre a,
+.${OVERLAY}-errors > section > pre span,
+.${OVERLAY}-warnings > section > pre span {
+  display: inline-flex;
+}
+.${OVERLAY}-hidden {
+  display: none;
+}
+`;
+const DEFAULT_NAME = 'webpack';
+const HTML = `
+<div class="${OVERLAY}">
+  <i class="${OVERLAY}-close"></i>
+  <div class="${OVERLAY}-title">
+    <em class="${OVERLAY}-name"></em>
+    <em class="${OVERLAY}-errors-title"></em>
+    <em class="${OVERLAY}-warnings-title"></em>
+  </div>
+  <aside class="${OVERLAY}-issues">
+    <article class="${OVERLAY}-errors ${OVERLAY}-hidden"></article>
+    <article class="${OVERLAY}-warnings ${OVERLAY}-hidden"></article>
+  </aside>
+</div>
+`;
+class Overlay {
+  constructor(name) {
+    this.hidden = true;
+    const root = getRootElement(OVERLAY);
+    injectCSS(CSS, root);
+    const [dialog] = appendHTML(HTML, root);
+    this.dialog = dialog;
+    this.name = dialog.querySelector(`.${OVERLAY}-name`);
+    this.close = dialog.querySelector(`.${OVERLAY}-close`);
+    this.errorsList = dialog.querySelector(`.${OVERLAY}-errors`);
+    this.warningsList = dialog.querySelector(`.${OVERLAY}-warnings`);
+    this.errorsTitle = dialog.querySelector(`.${OVERLAY}-errors-title`);
+    this.warningsTitle = dialog.querySelector(`.${OVERLAY}-warnings-title`);
+    this.name.innerHTML = `⭕ ${name || DEFAULT_NAME}`;
+    this.close.addEventListener('click', () => {
+      this.hide();
+    });
+  }
+  setIssues(type, issues) {
+    const count = issues.length;
+    const hidden = `${OVERLAY}-hidden`;
+    const problemMaps = {
+      errors: ['Error', this.errorsTitle, this.errorsList],
+      warnings: ['Warning', this.warningsTitle, this.warningsList]
+    };
+    const [name, problemTitle, problemList] = problemMaps[type];
+    if (count > 0) {
+      let html = '';
+      problemTitle.innerText = `${count} ${name}(s)`;
+      for (const { moduleName, chunkName, message } of issues) {
+        const details = ansiToHTML(message);
+        const filename = moduleName || chunkName || 'unknown';
+        html += `<section><em>${name}</em> in ${filename}<pre>${details}</pre></section>`;
+      }
+      problemList.innerHTML = html;
+      problemList.classList.remove(hidden);
+      problemTitle.classList.remove(hidden);
+    } else {
+      problemList.classList.add(hidden);
+      problemTitle.classList.add(hidden);
+    }
+  }
+  show() {
+    if (this.hidden) {
+      this.hidden = false;
+      this.dialog.classList.add(`${OVERLAY}-show`);
+    }
+  }
+  hide() {
+    if (!this.hidden) {
+      this.hidden = true;
+      this.dialog.classList.remove(`${OVERLAY}-show`);
+    }
+  }
+}
+
+export { Overlay as default };

package/esm/client/ui/progress.js

@@ -0,0 +1,90 @@
+/**
+ * @package webpack-dev-service
+ * @license MIT
+ * @version 0.10.2
+ * @author nuintun <nuintun@qq.com>
+ * @description A koa 2 middleware for webpack development and hot reloading.
+ * @see https://github.com/nuintun/webpack-dev-service#readme
+ */
+
+import { getRootElement, injectCSS, appendHTML } from './utils.js';
+
+/**
+ * @module progress
+ * @see https://github.com/shellscape/webpack-plugin-serve
+ * @see https://www.zhangxinxu.com/wordpress/2015/07/svg-circle-loading
+ */
+const PROGRESS = 'wds-progress';
+const PERIMETER = 2 * Math.PI * 44;
+const CSS = `
+.${PROGRESS} {
+  width: 48px;
+  right: 16px;
+  height: 48px;
+  bottom: 16px;
+  display: block;
+  font-size: 16px;
+  position: fixed;
+  cursor: default;
+  user-select: none;
+  font-style: normal;
+  font-weight: normal;
+  z-index: 2147483647;
+  transform-origin: center;
+  transform: scale(0) translateZ(0);
+  transition: transform .25s ease-out;
+}
+.${PROGRESS}-show {
+  transform: scale(1) translateZ(0);
+}
+.${PROGRESS}-track {
+  stroke: #badfac;
+  stroke-width: 8;
+  stroke-linecap: round;
+  fill: rgba(0, 0, 0, 0);
+  stroke-dasharray: ${PERIMETER};
+  stroke-dashoffset: ${PERIMETER};
+  transition: stroke-dashoffset .25s linear;
+  transform: matrix(0, -1, 1, 0, 0, 96) translateZ(0);
+}
+`;
+const HTML = `
+<svg class="${PROGRESS}" x="0" y="0" viewBox="0 0 96 96">
+  <circle fill="#282d35" cx="50%" cy="50%" r="44" />
+  <circle class="${PROGRESS}-track" cx="50%" cy="50%" r="44" />
+  <path fill="#fff" d="m48,83.213561l-31.122918,-17.60678l0,-35.21356l31.122918,-17.60678l31.122918,17.60678l0,35.21356l-31.122918,17.60678z" />
+  <path fill="#8ed6fb" d="m22.434956,31.608089l24.537982,-13.880011l0,10.810563l-15.288554,8.410172l-9.249428,-5.340723zm-1.678513,1.520052l0,29.027711l8.979458,-5.182262l0,-18.657318l-8.979458,-5.188131zm52.908373,-1.520052l-24.537982,-13.880011l0,10.810563l15.288554,8.410172l9.249428,-5.340723zm1.678513,1.520052l0,29.027711l-8.979458,-5.182262l0,-18.657318l8.979458,-5.188131zm-1.050538,30.905767l-25.165957,14.238016l0,-10.452558l16.121941,-8.867948l0.123247,-0.070427l8.920768,5.152918zm-52.485811,0l25.165957,14.238016l0,-10.452558l-16.121941,-8.867948l-0.123247,-0.070427l-8.920768,5.152918z" />
+  <path fill="#1c78c0" d="m49.126834,30.997721l15.083141,8.292793l0,16.432994l-15.083141,-8.709487l0,-16.016301zm-2.153896,0l-15.083141,8.292793l0,16.432994l15.083141,-8.709487l0,-16.016301zm16.215844,26.62732l-15.141831,8.328007l-15.141831,-8.328007l15.141831,-8.744701l15.141831,8.744701z" />
+</svg>
+`;
+class Progress {
+  constructor() {
+    this.hidden = true;
+    const root = getRootElement(PROGRESS);
+    injectCSS(CSS, root);
+    [this.svg] = appendHTML(HTML, root);
+    this.track = this.svg.querySelector(`.${PROGRESS}-track`);
+  }
+  update(value) {
+    value = Math.max(0, Math.min(100, value));
+    this.track.style.strokeDashoffset = (((100 - value) / 100) * PERIMETER).toString();
+  }
+  show() {
+    if (this.hidden) {
+      this.hidden = false;
+      clearTimeout(this.timer);
+      this.svg.classList.add(`${PROGRESS}-show`);
+    }
+  }
+  hide() {
+    if (!this.hidden) {
+      this.hidden = true;
+      this.timer = self.setTimeout(() => {
+        this.update(0);
+        this.svg.classList.remove(`${PROGRESS}-show`);
+      }, 300);
+    }
+  }
+}
+
+export { Progress as default };

package/esm/client/ui/utils.js

@@ -0,0 +1,123 @@
+/**
+ * @package webpack-dev-service
+ * @license MIT
+ * @version 0.10.2
+ * @author nuintun <nuintun@qq.com>
+ * @description A koa 2 middleware for webpack development and hot reloading.
+ * @see https://github.com/nuintun/webpack-dev-service#readme
+ */
+
+import Ansi from '@nuintun/ansi';
+
+/**
+ * @module utils
+ */
+const ansi = new Ansi();
+function escapeHTML(text) {
+  return text.replace(/[&<>"']/gm, match => {
+    switch (match) {
+      case '&':
+        return '&amp;';
+      case '<':
+        return '&lt;';
+      case '>':
+        return '&gt;';
+      case '"':
+        return '&quot;';
+      case "'":
+        return '&#x27;';
+      default:
+        return match;
+    }
+  });
+}
+function blockToHTML({ style, value, url }) {
+  const styles = [];
+  const textDecorations = [];
+  if (style.dim) {
+    styles.push(`opacity: 0.5`);
+  }
+  if (style.bold) {
+    styles.push(`font-weight: bold`);
+  }
+  if (style.italic) {
+    styles.push(`font-style: italic`);
+  }
+  if (style.inverse) {
+    styles.push(`filter: invert(1)`);
+  }
+  if (style.hidden) {
+    styles.push(`visibility: hidden`);
+  }
+  if (style.blink) {
+    textDecorations.push('blink');
+  }
+  if (style.overline) {
+    textDecorations.push('overline');
+  }
+  if (style.underline) {
+    textDecorations.push('underline');
+  }
+  if (style.strikethrough) {
+    textDecorations.push('line-through');
+  }
+  const { color, background } = style;
+  if (color) {
+    styles.push(`color: rgb(${color})`);
+  }
+  if (background) {
+    styles.push(`background-color: rgb(${background})`);
+  }
+  if (textDecorations.length > 0) {
+    styles.push(`text-decoration: ${textDecorations.join(' ')}`);
+  }
+  const escapedValue = escapeHTML(value);
+  const href = url ? JSON.stringify(new URL(url).toString()) : null;
+  if (styles.length <= 0) {
+    if (!href) {
+      return escapedValue;
+    }
+    return `<a href=${href} target="_blank">${escapedValue}</a>`;
+  }
+  const inlineStyle = JSON.stringify(`${styles.join('; ')};`);
+  if (!href) {
+    return `<span style=${inlineStyle}>${escapedValue}</span>`;
+  }
+  return `<a style=${inlineStyle} href=${href} target="_blank">${escapedValue}</a>`;
+}
+function ansiToHTML(text) {
+  let html = '';
+  ansi.write(text, block => {
+    html += blockToHTML(block);
+  });
+  ansi.flush(block => {
+    html += blockToHTML(block);
+  });
+  return html;
+}
+function getRootElement(tagName) {
+  const stage = document.createElement(tagName);
+  const root = stage.attachShadow({ mode: 'closed' });
+  document.body.appendChild(stage);
+  return root;
+}
+function injectCSS(css, root = document.body, styleElement = document.createElement('style')) {
+  styleElement.appendChild(document.createTextNode(css.trim()));
+  if (!root.contains(styleElement)) {
+    root.appendChild(styleElement);
+  }
+  return styleElement;
+}
+function appendHTML(html, root = document.body) {
+  const nodes = [];
+  const parser = new DOMParser();
+  const fragment = document.createDocumentFragment();
+  const { body } = parser.parseFromString(html.trim(), 'text/html');
+  while (body.firstChild) {
+    nodes.push(fragment.appendChild(body.firstChild));
+  }
+  root.appendChild(fragment);
+  return nodes;
+}
+
+export { ansiToHTML, appendHTML, blockToHTML, escapeHTML, getRootElement, injectCSS };

package/esm/server/compose.js

@@ -0,0 +1,54 @@
+/**
+ * @package webpack-dev-service
+ * @license MIT
+ * @version 0.10.2
+ * @author nuintun <nuintun@qq.com>
+ * @description A koa 2 middleware for webpack development and hot reloading.
+ * @see https://github.com/nuintun/webpack-dev-service#readme
+ */
+
+/**
+ * @module compose
+ */
+/**
+ * @function dispatch
+ * @param middlewares 中间件数组
+ * @param index 要执行的中间件索引
+ * @param stack 调用栈信息
+ * @param context 执行上下文
+ * @param [next] 下一个中间件
+ */
+async function dispatch(middlewares, index, stack, context, next) {
+  if (index <= stack.index) {
+    throw new Error('next() called multiple times');
+  }
+  stack.index = index;
+  const { length } = middlewares;
+  if (index < length) {
+    const middleware = middlewares[index];
+    await middleware(context, () => {
+      return dispatch(middlewares, index + 1, stack, context, next);
+    });
+  } else if (next) {
+    await next();
+  }
+}
+/**
+ * @function compose
+ * @description 生成融合中间件
+ * @param middlewares 中间件数组
+ */
+function compose(...middlewares) {
+  /**
+   * @function middleware
+   * @description 融合中间件
+   * @param context 执行上下文
+   * @param [next] 下一个中间件
+   */
+  return (context, next) => {
+    const stack = { index: -1 };
+    return dispatch(middlewares, 0, stack, context, next);
+  };
+}
+
+export { compose };