webpack-dev-service 0.1.0

package/client/esm/ui/progress.js

@@ -0,0 +1,92 @@
+/**
+ * @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 } from './utils/index.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 {
+  timer;
+  hidden = true;
+  svg;
+  track;
+  constructor() {
+    injectCSS(CSS);
+    [this.svg] = appendHTML(HTML);
+    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/client/esm/ui/utils/ansi/index.js

@@ -0,0 +1,441 @@
+/**
+ * @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 { getThemeColor, toUint8 } from './utils.js';
+import { CSI_RE, OSC_ST_RE, OSC_RE } from './regx.js';
+
+/**
+ * @module index
+ */
+class Ansi {
+  buffer = '';
+  style = {
+    dim: false,
+    bold: false,
+    color: null,
+    blink: false,
+    hidden: false,
+    italic: false,
+    inverse: false,
+    overline: false,
+    background: null,
+    underline: false,
+    strikethrough: false
+  };
+  colors256;
+  colors16;
+  constructor(theme = {}) {
+    const colors16 = [
+      // Colors 16 bit
+      [
+        // Black
+        getThemeColor([0, 0, 0], theme.black),
+        // Red
+        getThemeColor([187, 0, 0], theme.red),
+        // Green
+        getThemeColor([0, 187, 0], theme.green),
+        // Yellow
+        getThemeColor([187, 187, 0], theme.yellow),
+        // Blue
+        getThemeColor([0, 0, 187], theme.blue),
+        // Magenta
+        getThemeColor([187, 0, 187], theme.magenta),
+        // Cyan
+        getThemeColor([0, 187, 187], theme.cyan),
+        // White
+        getThemeColor([255, 255, 255], theme.white)
+      ],
+      // Bright colors
+      [
+        // Bright Black
+        getThemeColor([85, 85, 85], theme.brightBlack),
+        // Bright Red
+        getThemeColor([255, 85, 85], theme.brightRed),
+        // Bright Green
+        getThemeColor([0, 255, 0], theme.brightGreen),
+        // Bright Yellow
+        getThemeColor([255, 255, 85], theme.brightYellow),
+        // Bright Blue
+        getThemeColor([85, 85, 255], theme.brightBlue),
+        // Bright Magenta
+        getThemeColor([255, 85, 255], theme.brightMagenta),
+        // Bright Cyan
+        getThemeColor([85, 255, 255], theme.brightCyan),
+        // Bright White
+        getThemeColor([255, 255, 255], theme.brightWhite)
+      ]
+    ];
+    // Colors 256 bit
+    const colors256 = [];
+    // Index 0..15 : Ansi-Colors
+    for (const palette of colors16) {
+      for (const color of palette) {
+        colors256.push(color);
+      }
+    }
+    // Index 16..231 : RGB 6x6x6
+    // https://gist.github.com/jasonm23/2868981#file-xterm-256color-yaml
+    const levels = [0, 95, 135, 175, 215, 255];
+    for (let r = 0; r < 6; ++r) {
+      for (let g = 0; g < 6; ++g) {
+        for (let b = 0; b < 6; ++b) {
+          colors256.push([levels[r], levels[g], levels[b]]);
+        }
+      }
+    }
+    // Index 232..255 : Grayscale
+    let grayscale = 8;
+    for (let i = 0; i < 24; ++i, grayscale += 10) {
+      colors256.push([grayscale, grayscale, grayscale]);
+    }
+    // Init ANSI colors
+    this.colors16 = colors16;
+    this.colors256 = colors256;
+  }
+  read() {
+    const { buffer } = this;
+    const { length } = buffer;
+    const pos = buffer.indexOf('\x1B');
+    // The most common case, no ESC codes
+    if (pos < 0) {
+      this.buffer = '';
+      return {
+        value: buffer,
+        type: 4 /* TokenType.TEXT */
+      };
+    }
+    if (pos > 0) {
+      this.buffer = buffer.slice(pos);
+      return {
+        type: 4 /* TokenType.TEXT */,
+        value: buffer.slice(0, pos)
+      };
+    }
+    if (length === 1) {
+      // Lone ESC in Buffer, We don't know yet
+      return {
+        type: 5 /* TokenType.INCESC */
+      };
+    }
+    const peek = buffer.charAt(1);
+    // We treat this as a single ESC
+    // Which effecitvely shows
+    if (peek !== '[' && peek !== ']') {
+      this.buffer = buffer.slice(1);
+      // DeMorgan
+      return {
+        type: 1 /* TokenType.ESC */
+      };
+    }
+    // OK is this an SGR or OSC that we handle
+    // SGR CHECK
+    if (peek === '[') {
+      // We do this regex initialization here so
+      // we can keep the regex close to its use (Readability)
+      // All ansi codes are typically in the following format.
+      // We parse it and focus specifically on the
+      // graphics commands (SGR)
+      //
+      // CONTROL-SEQUENCE-INTRODUCER CSI             (ESC, '[')
+      // PRIVATE-MODE-CHAR                           (!, <, >, ?)
+      // Numeric parameters separated by semicolons  ('0' - '9', ';')
+      // Intermediate-modifiers                      (0x20 - 0x2f)
+      // COMMAND-CHAR                                (0x40 - 0x7e)
+      const match = buffer.match(CSI_RE);
+      // This match is guaranteed to terminate (even on
+      // invalid input). The key is to match on legal and
+      // illegal sequences.
+      // The first alternate matches everything legal and
+      // the second matches everything illegal.
+      //
+      // If it doesn't match, then we have not received
+      // either the full sequence or an illegal sequence.
+      // If it does match, the presence of field 4 tells
+      // us whether it was legal or illegal.
+      if (match === null) {
+        return {
+          type: 5 /* TokenType.INCESC */
+        };
+      }
+      // match is an array
+      // 0 - total match
+      // 1 - private mode chars group
+      // 2 - digits and semicolons group
+      // 3 - command
+      // 4 - illegal char
+      if (match[4]) {
+        this.buffer = buffer.slice(1);
+        // Illegal sequence, just remove the ESC
+        return {
+          type: 1 /* TokenType.ESC */
+        };
+      }
+      this.buffer = buffer.slice(match[0].length);
+      // If not a valid SGR, we don't handle
+      if (match[1] !== '' || match[3] !== 'm') {
+        return {
+          type: 6 /* TokenType.UNKNOWN */
+        };
+      } else {
+        return {
+          signal: match[2],
+          type: 3 /* TokenType.SGR */
+        };
+      }
+    }
+    // OSC CHECK
+    if (peek === ']') {
+      if (length < 4) {
+        return {
+          type: 5 /* TokenType.INCESC */
+        };
+      }
+      if (buffer.charAt(2) !== '8' || buffer.charAt(3) !== ';') {
+        this.buffer = buffer.slice(1);
+        // This is not a match, so we'll just treat it as ESC
+        return {
+          type: 1 /* TokenType.ESC */
+        };
+      }
+      // We do this regex initialization here so
+      // we can keep the regex close to its use (Readability)
+      // Matching a Hyperlink OSC with a regex is difficult
+      // because Javascript's regex engine doesn't support
+      // 'partial match' support.
+      //
+      // Therefore, we require the system to match the
+      // string-terminator(ST) before attempting a match.
+      // Once we find it, we attempt the Hyperlink-Begin
+      // match.
+      // If that goes ok, we scan forward for the next
+      // ST.
+      // Finally, we try to match it all and return
+      // the sequence.
+      // Also, it is important to note that we consider
+      // certain control characters as an invalidation of
+      // the entire sequence.
+      // We do regex initializations here so
+      // we can keep the regex close to its use (Readability)
+      // STRING-TERMINATOR
+      // This is likely to terminate in most scenarios
+      // because it will terminate on a newline
+      // VERY IMPORTANT
+      // We do a stateful regex match with exec.
+      // If the regex is global, and it used with 'exec',
+      // then it will search starting at the 'lastIndex'
+      // If it matches, the regex can be used again to
+      // find the next match.
+      OSC_ST_RE.lastIndex = 0;
+      // We might have the prefix and URI
+      // Lets start our search for the ST twice
+      for (let count = 0; count < 2; count++) {
+        const match = OSC_ST_RE.exec(buffer);
+        if (match === null) {
+          return {
+            type: 5 /* TokenType.INCESC */
+          };
+        }
+        // If an illegal character was found, bail on the match
+        if (match[3]) {
+          this.buffer = buffer.slice(1);
+          // Illegal sequence, just remove the ESC
+          return {
+            type: 1 /* TokenType.ESC */
+          };
+        }
+      }
+      // OK, at this point we should have a FULL match!
+      // Lets try to match that now
+      const match = buffer.match(OSC_RE);
+      if (match === null) {
+        this.buffer = buffer.slice(1);
+        // Illegal sequence, just remove the ESC
+        return {
+          type: 1 /* TokenType.ESC */
+        };
+      }
+      this.buffer = buffer.slice(match[0].length);
+      // If a valid SGR
+      // match is an array
+      // 0 - total match
+      // 1 - URL
+      // 2 - Text
+      return {
+        url: match[1],
+        value: match[2],
+        type: 2 /* TokenType.OSC */
+      };
+    }
+    return {
+      type: 0 /* TokenType.EOS */
+    };
+  }
+  reset() {
+    const { style } = this;
+    style.dim = false;
+    style.bold = false;
+    style.color = null;
+    style.blink = false;
+    style.hidden = false;
+    style.italic = false;
+    style.inverse = false;
+    style.background = null;
+    style.underline = false;
+    style.strikethrough = false;
+  }
+  process(signal) {
+    let index = 0;
+    // Ok - we have a valid "SGR" (Select Graphic Rendition)
+    const sequences = signal.split(';');
+    const maxIndex = sequences.length - 1;
+    // ANSI style and colors
+    const { style, colors16, colors256 } = this;
+    // Read cmd by index
+    const read = () => parseInt(sequences[index++], 10);
+    // Each of these params affects the SGR state
+    // Why do we shift through the array instead of a forEach??
+    // ... because some commands consume the params that follow !
+    for (; index <= maxIndex; index++) {
+      const code = read();
+      if (code === 1) {
+        style.bold = true;
+      } else if (code === 2) {
+        style.dim = true;
+      } else if (code === 3) {
+        style.italic = true;
+      } else if (code === 4) {
+        style.underline = true;
+      } else if (code === 5) {
+        style.blink = true;
+      } else if (code === 7) {
+        style.inverse = true;
+      } else if (code === 8) {
+        style.hidden = true;
+      } else if (code === 9) {
+        style.strikethrough = true;
+      } else if (code === 53) {
+        style.overline = true;
+      } else if (code === 21) {
+        style.bold = false;
+      } else if (code === 22) {
+        style.dim = false;
+        style.bold = false;
+      } else if (code === 23) {
+        style.italic = false;
+      } else if (code === 24) {
+        style.underline = false;
+      } else if (code === 25) {
+        style.blink = false;
+      } else if (code === 27) {
+        style.inverse = false;
+      } else if (code === 28) {
+        style.hidden = false;
+      } else if (code === 29) {
+        style.strikethrough = false;
+      } else if (code === 29) {
+        style.strikethrough = false;
+      } else if (code === 55) {
+        style.overline = false;
+      } else if (code === 49) {
+        style.background = null;
+      } else if (code >= 30 && code < 38) {
+        style.color = colors16[0][code - 30];
+      } else if (code >= 40 && code < 48) {
+        style.background = colors16[0][code - 40];
+      } else if (code >= 90 && code < 98) {
+        style.color = colors16[1][code - 90];
+      } else if (code >= 100 && code < 108) {
+        style.background = colors16[1][code - 100];
+      } else if (code === 38 || code === 48) {
+        // Extended set foreground/background color
+        // validate that param exists
+        if (index < maxIndex) {
+          const mode = read();
+          // Extend color (38=fg, 48=bg)
+          const isForeground = code === 38;
+          // MODE 5 - 256 color palette
+          if (mode === 5 && index <= maxIndex) {
+            const index = toUint8(read());
+            if (isForeground) {
+              style.color = colors256[index];
+            } else {
+              style.background = colors256[index];
+            }
+          }
+          // MODE 2 - True Color
+          if (mode === 2 && index + 2 <= maxIndex) {
+            const r = toUint8(read());
+            const g = toUint8(read());
+            const b = toUint8(read());
+            // True Color
+            const color = [r, g, b];
+            if (isForeground) {
+              style.color = color;
+            } else {
+              style.background = color;
+            }
+          }
+        }
+      } else {
+        this.reset();
+      }
+    }
+  }
+  block(token) {
+    const block = {
+      value: token.value,
+      style: { ...this.style }
+    };
+    if ('url' in token) {
+      block.url = token.url;
+    }
+    return block;
+  }
+  write(text, callback) {
+    this.buffer += text;
+    while (this.buffer) {
+      const token = this.read();
+      switch (token.type) {
+        case 0 /* TokenType.EOS */:
+        case 5 /* TokenType.INCESC */:
+          break;
+        case 1 /* TokenType.ESC */:
+        case 6 /* TokenType.UNKNOWN */:
+          continue;
+        case 3 /* TokenType.SGR */:
+          this.process(token.signal);
+          continue;
+        case 2 /* TokenType.OSC */:
+        case 4 /* TokenType.TEXT */:
+          callback(this.block(token));
+          continue;
+        default:
+          continue;
+      }
+    }
+  }
+  flush(callback) {
+    const { buffer } = this;
+    // Get flush block
+    if (buffer !== '') {
+      callback(
+        this.block({
+          value: buffer,
+          type: 4 /* TokenType.TEXT */
+        })
+      );
+    }
+    // Reset
+    this.reset();
+    // Flush buffer
+    this.buffer = '';
+  }
+}
+
+export { Ansi as default };

package/client/esm/ui/utils/ansi/regx.js

@@ -0,0 +1,66 @@
+/**
+ * @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 regx
+ */
+// prettier-ignore
+// (?:                         # legal sequence
+//   (\x1b\\)                    # ESC \
+//   |                           # alternate
+//   (\x07)                      # BEL (what xterm did)
+// )                           # legal sequence end
+// |                           # alternate (second attempt)
+// (                           # illegal sequence
+//   [\x00-\x06]                 # anything illegal
+//   |                           # alternate
+//   [\x08-\x1a]                 # anything illegal
+//   |                           # alternate
+//   [\x1c-\x1f]                 # anything illegal
+// )                           # illegal sequence end
+const OSC_ST_RE = /(?:(\x1b\\)|(\x07))|([\x00-\x06]|[\x08-\x1a]|[\x1c-\x1f])/g;
+// prettier-ignore
+// ^                           # beginning of line
+// (?:                         # legal sequence
+//   \x1b\[                      # CSI
+//   ([\x3c-\x3f]?)              # private-mode char
+//   ([\d;]*)                    # any digits or semicolons
+//   (                           # modifier command sequence
+//     [\x20-\x2f]?                # an intermediate modifier
+//     [\x40-\x7e]                 # the command
+//   )                           # modifier command sequence end
+// )                           # legal sequence end
+// |                           # alternate (second attempt)
+// (?:                         # illegal sequence
+//   \x1b\[                      # CSI
+//   [\x20-\x7e]*                # anything legal
+//   ([\x00-\x1f:])              # anything illegal
+// )                           # illegal sequence end
+const CSI_RE = /^(?:\x1b\[([\x3c-\x3f]?)([\d;]*)([\x20-\x2f]?[\x40-\x7e]))|(?:\x1b\[[\x20-\x7e]*([\x00-\x1f:]))/;
+// prettier-ignore
+// ^                           # beginning of line
+// \x1b\]8;                    # OSC Hyperlink
+// [\x20-\x3a\x3c-\x7e]*       # params (excluding ;)
+// ;                           # end of params
+// ([\x21-\x7e]{0,512})        # URL capture
+// (?:                         # ST sequence
+//   (?:\x1b\\)                  # ESC \
+//   |                           # alternate
+//   (?:\x07)                    # BEL (what xterm did)
+// )                           # ST sequence end
+// ([\x20-\x7e]+)              # TEXT capture
+// \x1b\]8;;                   # OSC Hyperlink End
+// (?:                         # ST sequence
+//   (?:\x1b\\)                  # ESC \
+//   |                           # alternate
+//   (?:\x07)                    # BEL (what xterm did)
+// )                           # ST sequence end
+const OSC_RE = /^\x1b\]8;[\x20-\x3a\x3c-\x7e]*;([\x21-\x7e]{0,512})(?:(?:\x1b\\)|(?:\x07))([\x20-\x7e]+)\x1b\]8;;(?:(?:\x1b\\)|(?:\x07))/;
+
+export { CSI_RE, OSC_RE, OSC_ST_RE };

package/client/esm/ui/utils/ansi/utils.js

@@ -0,0 +1,24 @@
+/**
+ * @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 utils
+ */
+function toUint8(uint8) {
+  return uint8 & 0xff;
+}
+function getThemeColor(defaultColor, color) {
+  if (color) {
+    const [r, g, b] = color;
+    return [toUint8(r), toUint8(g), toUint8(b)];
+  }
+  return defaultColor;
+}
+
+export { getThemeColor, toUint8 };