webpack-dev-service 0.1.0

package/client/cjs/ui/utils/index.cjs

@@ -0,0 +1,126 @@
+/**
+ * @package webpack-dev-service
+ * @license MIT
+ * @version 0.1.0
+ * @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
+ */
+
+'use strict';
+
+const index = require('./ansi/index.cjs');
+
+/**
+ * @module utils
+ */
+const ansi = new index();
+const defaultStyleElement = document.createElement('style');
+function injectCSS(css, styleElement = defaultStyleElement) {
+  const { head } = document;
+  styleElement.appendChild(document.createTextNode(css.trim()));
+  if (!head.contains(styleElement)) {
+    head.appendChild(styleElement);
+  }
+  return styleElement;
+}
+function appendHTML(html, parent) {
+  const nodes = [];
+  const parser = new DOMParser();
+  const stage = parent || document.body;
+  const fragment = document.createDocumentFragment();
+  const { body } = parser.parseFromString(html.trim(), 'text/html');
+  while (body.firstChild) {
+    nodes.push(fragment.appendChild(body.firstChild));
+  }
+  stage.appendChild(fragment);
+  return nodes;
+}
+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(escapeHTML(url)) : 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;
+}
+
+exports.ansiToHTML = ansiToHTML;
+exports.appendHTML = appendHTML;
+exports.blockToHTML = blockToHTML;
+exports.escapeHTML = escapeHTML;
+exports.injectCSS = injectCSS;

package/client/esm/client.js

@@ -0,0 +1,126 @@
+/**
+ * @package webpack-dev-service
+ * @license MIT
+ * @version 0.1.0
+ * @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 { emit } from './events.js';
+import Overlay from './ui/overlay.js';
+import Progress from './ui/progress.js';
+import { applyUpdate, setHash } from './hot.js';
+
+/**
+ * @module client
+ */
+function createClient(options) {
+  let updateTimer;
+  const UPDATE_DELAY = 128;
+  const RETRY_INTERVAL = 3000;
+  const progress = new Progress();
+  const overlay = new Overlay(options.name);
+  const fallback = error => {
+    if (options.live) {
+      self.location.reload();
+    } else if (error) {
+      console.error(error);
+      console.warn('Use fallback update but you turn off live reload, please reload by yourself.');
+    }
+  };
+  const applyUpdateAsync = () => {
+    updateTimer = self.setTimeout(() => {
+      applyUpdate(options.hmr, fallback);
+    }, UPDATE_DELAY);
+  };
+  const onInvalid = () => {
+    clearTimeout(updateTimer);
+    if (options.progress) {
+      progress.update(0);
+      progress.show();
+    }
+  };
+  const onProgress = ({ value }) => {
+    if (options.progress) {
+      progress.update(value);
+    }
+  };
+  const onHash = ({ hash }) => {
+    setHash(hash);
+  };
+  const setProblems = (type, problems) => {
+    const maps = {
+      errors: ['Error', 'error'],
+      warnings: ['Warning', 'warn']
+    };
+    if (options.overlay) {
+      overlay.setProblems(type, problems);
+    }
+    const [name, method] = maps[type];
+    const debug = console[method];
+    for (const { moduleName, message } of problems) {
+      debug(`\x1b[0m${name} in ${moduleName}\r\n\x1b[0m${message}`);
+    }
+  };
+  const onProblems = ({ errors, warnings }) => {
+    progress.hide();
+    setProblems('errors', errors);
+    setProblems('warnings', warnings);
+    if (options.overlay) {
+      overlay.show();
+    }
+    if (errors.length <= 0) {
+      applyUpdateAsync();
+    }
+  };
+  const onSuccess = () => {
+    overlay.hide();
+    progress.hide();
+    applyUpdateAsync();
+  };
+  const parseMessage = message => {
+    try {
+      return JSON.parse(message.data);
+    } catch {
+      return null;
+    }
+  };
+  const createWebSocket = url => {
+    const ws = new WebSocket(url);
+    ws.onmessage = message => {
+      const parsed = parseMessage(message);
+      if (parsed) {
+        const { action, payload } = parsed;
+        switch (action) {
+          case 'invalid':
+            onInvalid();
+            break;
+          case 'progress':
+            onProgress(payload);
+            break;
+          case 'hash':
+            onHash(payload);
+            break;
+          case 'problems':
+            onProblems(payload);
+            break;
+          case 'ok':
+            onSuccess();
+            break;
+        }
+        emit(action, payload, options);
+      }
+    };
+    ws.onclose = () => {
+      overlay.hide();
+      progress.hide();
+      setTimeout(() => {
+        createWebSocket(url);
+      }, RETRY_INTERVAL);
+    };
+  };
+  createWebSocket(options.host + options.path);
+}
+
+export { createClient as default };

package/client/esm/events.js

@@ -0,0 +1,60 @@
+/**
+ * @package webpack-dev-service
+ * @license MIT
+ * @version 0.1.0
+ * @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 events
+ */
+const events = {
+  ok: [],
+  hash: [],
+  invalid: [],
+  problems: [],
+  progress: []
+};
+/**
+ * @function on
+ * @description Add an event listener callback.
+ * @param event Event name.
+ * @param callback Event listener callback.
+ */
+function on(event, callback) {
+  const callbacks = events[event];
+  if (callbacks) {
+    callbacks.push(callback);
+  }
+}
+/**
+ * @function off
+ * @description Remove an event listener callback.
+ * @param event Event name.
+ * @param callback Event listener callback.
+ */
+function off(event, callback) {
+  const callbacks = events[event];
+  if (callbacks) {
+    if (callback) {
+      const index = callbacks.indexOf(callback);
+      if (index >= 0) {
+        callbacks.splice(index, 1);
+      }
+    } else {
+      events[event] = [];
+    }
+  }
+}
+function emit(event, message, options) {
+  const callbacks = events[event];
+  if (callbacks && callbacks.length > 0) {
+    for (const callback of callbacks) {
+      callback(message, options);
+    }
+  }
+}
+
+export { emit, off, on };

package/client/esm/hot.js

@@ -0,0 +1,106 @@
+/**
+ * @package webpack-dev-service
+ * @license MIT
+ * @version 0.1.0
+ * @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/client/esm/index.js

@@ -0,0 +1,10 @@
+/**
+ * @package webpack-dev-service
+ * @license MIT
+ * @version 0.1.0
+ * @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/client/esm/main.js

@@ -0,0 +1,51 @@
+/**
+ * @package webpack-dev-service
+ * @license MIT
+ * @version 0.1.0
+ * @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 resolveHost = params => {
+  let host = params.get('host');
+  let tls = params.get('tls') || isTLS(self.location.protocol);
+  if (!host) {
+    const script = getCurrentScript();
+    if (script) {
+      const { src } = script;
+      const url = new URL(src);
+      host = url.host;
+      tls = isTLS(url.protocol) || tls;
+    } else {
+      host = self.location.host;
+    }
+  }
+  return `${tls ? 'wss' : 'ws'}://${host}`;
+};
+const resolveOptions = () => {
+  const params = new URLSearchParams(__resourceQuery);
+  const host = resolveHost(params);
+  const live = params.get('live') !== 'false';
+  const overlay = params.get('overlay') !== 'false';
+  try {
+    return { ...__WDS_HOT_OPTIONS__, host, live, overlay };
+  } catch {
+    throw new Error('Imported the hot client but the hot server is not enabled.');
+  }
+};
+createClient(resolveOptions());

package/client/esm/ui/overlay.js

@@ -0,0 +1,234 @@
+/**
+ * @package webpack-dev-service
+ * @license MIT
+ * @version 0.1.0
+ * @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 { injectCSS, appendHTML, ansiToHTML } from './utils/index.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;
+   overflow-wrap: break-word;
+   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}-problems {
+   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}-problems::-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;
+   white-space: pre-wrap;
+   font-family: Consolas, "Lucida Console", monospace;
+ }
+ .${OVERLAY}-errors > div,
+ .${OVERLAY}-warnings > div {
+   overflow-wrap: break-word;
+ }
+ .${OVERLAY}-errors > div + div,
+ .${OVERLAY}-warnings > div + div {
+   margin: 16px 0 0;
+ }
+ .${OVERLAY}-errors > div > em,
+ .${OVERLAY}-warnings > div > 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 > div > em {
+   color: #3e2723;
+   background: #ffbd2e;
+ }
+ .${OVERLAY}-errors > div > div,
+ .${OVERLAY}-warnings > div > div {
+   font-size: 14px;
+   padding: 8px 0 0 16px;
+   overflow-wrap: break-word;
+ }
+ .${OVERLAY}-hidden {
+   display: none;
+ }
+ `;
+const DEFAULT_NAME = 'webpack';
+const HTML = `
+ <aside 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>
+   <article class="${OVERLAY}-problems">
+     <pre class="${OVERLAY}-errors ${OVERLAY}-hidden"></pre>
+     <pre class="${OVERLAY}-warnings ${OVERLAY}-hidden"></pre>
+   </article>
+ </aside>
+ `;
+class Overlay {
+  hidden = true;
+  name;
+  close;
+  aside;
+  errorsList;
+  errorsTitle;
+  warningsList;
+  warningsTitle;
+  constructor(name) {
+    injectCSS(CSS);
+    [this.aside] = appendHTML(HTML);
+    this.name = this.aside.querySelector(`.${OVERLAY}-name`);
+    this.close = this.aside.querySelector(`.${OVERLAY}-close`);
+    this.errorsList = this.aside.querySelector(`.${OVERLAY}-errors`);
+    this.warningsList = this.aside.querySelector(`.${OVERLAY}-warnings`);
+    this.errorsTitle = this.aside.querySelector(`.${OVERLAY}-errors-title`);
+    this.warningsTitle = this.aside.querySelector(`.${OVERLAY}-warnings-title`);
+    this.name.innerHTML = `⭕ ${name || DEFAULT_NAME}`;
+    this.close.addEventListener('click', () => {
+      this.hide();
+    });
+  }
+  setProblems(type, problems) {
+    const count = problems.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 = 'unknown', message } of problems) {
+        const src = ansiToHTML(moduleName);
+        const details = ansiToHTML(message);
+        html += `<div><em>${name}</em> in ${src}<div>${details}</div></div>`;
+      }
+      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.aside.classList.add(`${OVERLAY}-show`);
+    }
+  }
+  hide() {
+    if (!this.hidden) {
+      this.hidden = true;
+      this.aside.classList.remove(`${OVERLAY}-show`);
+    }
+  }
+}
+
+export { Overlay as default };