webpack-dev-service 0.9.0 → 0.10.0

package/{server/cjs → cjs/server}/index.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.9.0
+ * @version 0.10.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

package/package.json

@@ -1,34 +1,24 @@
 {
   "name": "webpack-dev-service",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "A koa 2 middleware for webpack development and hot reloading.",
   "type": "module",
   "sideEffects": [
-    "client/esm/main.js",
-    "client/cjs/main.cjs"
+    "esm/client/main.js",
+    "cjs/client/main.cjs"
   ],
-  "main": "server/cjs/index.cjs",
-  "module": "server/esm/index.js",
+  "main": "cjs/server/index.cjs",
+  "module": "esm/server/index.js",
   "types": "types/server/index.d.ts",
   "exports": {
     ".": {
-      "import": "./server/esm/index.js",
-      "require": "./server/cjs/index.cjs",
+      "import": "./esm/server/index.js",
+      "require": "./cjs/server/index.cjs",
       "types": "./types/server/index.d.ts"
     },
     "./client": {
-      "import": "./client/esm/main.js",
-      "require": "./client/cjs/main.cjs",
-      "types": "./types/client/main.d.ts"
-    },
-    "./client?*": {
-      "import": "./client/esm/main.js?*",
-      "require": "./client/cjs/main.cjs?*",
-      "types": "./types/client/main.d.ts"
-    },
-    "./events": {
-      "import": "./client/esm/index.js",
-      "require": "./client/cjs/index.cjs",
+      "import": "./esm/client/index.js",
+      "require": "./cjs/client/index.cjs",
       "types": "./types/client/index.d.ts"
     }
   },
@@ -38,12 +28,6 @@
         "./types/server/index.d.ts"
       ],
       "client": [
-        "./types/client/main.d.ts"
-      ],
-      "client?*": [
-        "./types/client/main.d.ts"
-      ],
-      "events": [
         "./types/client/index.d.ts"
       ]
     }
@@ -102,15 +86,16 @@
     "ws": "^8.16.0"
   },
   "devDependencies": {
+    "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-typescript": "^11.1.6",
     "@swc/core": "^1.4.11",
-    "@swc/helpers": "^0.5.7",
+    "@swc/helpers": "^0.5.8",
     "@types/destroy": "^1.0.3",
     "@types/etag": "^1.8.3",
     "@types/koa-compose": "^3.2.8",
     "@types/node": "^20.11.30",
     "@types/range-parser": "^1.2.7",
-    "@types/react": "^18.2.72",
+    "@types/react": "^18.2.73",
     "@types/react-dom": "^18.2.22",
     "css-loader": "^6.10.0",
     "html-webpack-plugin": "^5.6.0",
@@ -123,7 +108,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
-    "rollup": "^4.13.0",
+    "rollup": "^4.13.1",
     "swc-loader": "^0.2.6",
     "tsc-alias": "^1.8.8",
     "typescript": "^5.4.3",

package/client/cjs/client.cjs

@@ -1,128 +0,0 @@
-/**
- * @package webpack-dev-service
- * @license MIT
- * @version 0.9.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 events = require('./events.cjs');
-const overlay = require('./ui/overlay.cjs');
-const progress = require('./ui/progress.cjs');
-const hot = require('./hot.cjs');
-
-/**
- * @module client
- */
-function createClient(options) {
-  let updateTimer;
-  const UPDATE_DELAY = 128;
-  const RETRY_INTERVAL = 3000;
-  const progress$1 = new progress();
-  const overlay$1 = new overlay(options.name);
-  const fallback = () => {
-    if (options.reload) {
-      self.location.reload();
-    } else {
-      console.warn('Use fallback update but you turn off live reload, please reload by yourself.');
-    }
-  };
-  const applyUpdateAsync = () => {
-    updateTimer = self.setTimeout(() => {
-      hot.applyUpdate(options.hmr, fallback);
-    }, UPDATE_DELAY);
-  };
-  const onInvalid = () => {
-    clearTimeout(updateTimer);
-    if (options.progress) {
-      progress$1.update(0);
-      progress$1.show();
-    }
-  };
-  const onProgress = ({ value }) => {
-    if (options.progress) {
-      progress$1.update(value);
-    }
-  };
-  const onHash = ({ hash }) => {
-    hot.setHash(hash);
-  };
-  const setIssues = (type, issues) => {
-    if (options.overlay) {
-      overlay$1.setIssues(type, issues);
-    }
-    const maps = {
-      errors: ['\x1b[38;2;100;30;22m\x1b[48;2;255;95;88m ERROR \x1b[0m', 'error'],
-      warnings: ['\x1b[38;2;32;39;35m\x1b[48;2;255;189;46m WARNING \x1b[0m', 'warn']
-    };
-    const [name, method] = maps[type];
-    const debug = console[method];
-    for (const { moduleName, chunkName, message } of issues) {
-      const filename = moduleName || chunkName || 'unknown';
-      debug(`${name} in ${filename}\n${message}`);
-    }
-  };
-  const onIssues = ({ errors, warnings }) => {
-    progress$1.hide();
-    setIssues('errors', errors);
-    setIssues('warnings', warnings);
-    if (options.overlay) {
-      overlay$1.show();
-    }
-    if (errors.length <= 0) {
-      applyUpdateAsync();
-    }
-  };
-  const onOk = () => {
-    overlay$1.hide();
-    progress$1.hide();
-    applyUpdateAsync();
-  };
-  const parseMessage = message => {
-    try {
-      return JSON.parse(message.data);
-    } catch (_a) {
-      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 'issues':
-            onIssues(payload);
-            break;
-          case 'ok':
-            onOk();
-            break;
-        }
-        events.emit(action, payload, options);
-      }
-    };
-    ws.onclose = () => {
-      overlay$1.hide();
-      progress$1.hide();
-      setTimeout(() => {
-        createWebSocket(url);
-      }, RETRY_INTERVAL);
-    };
-  };
-  createWebSocket(`${options.origin}${options.path}`);
-}
-
-module.exports = createClient;

package/client/cjs/events.cjs

@@ -1,64 +0,0 @@
-/**
- * @package webpack-dev-service
- * @license MIT
- * @version 0.9.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';
-
-/**
- * @module events
- */
-const events = {
-  ok: [],
-  hash: [],
-  issues: [],
-  invalid: [],
-  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);
-    }
-  }
-}
-
-exports.emit = emit;
-exports.off = off;
-exports.on = on;

package/client/cjs/hot.cjs

@@ -1,111 +0,0 @@
-/**
- * @package webpack-dev-service
- * @license MIT
- * @version 0.9.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';
-
-/**
- * @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 (module.hot) {
-  setStatus(module.hot.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 && module.hot) {
-      switch (status) {
-        case 'idle':
-          // Set status.
-          setStatus('check');
-          // Auto check and apply updates.
-          module.hot
-            .check(true)
-            .then(updated => {
-              // Update status.
-              setStatus(module.hot.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 = module.hot.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();
-    }
-  }
-}
-
-exports.applyUpdate = applyUpdate;
-exports.isUpdateAvailable = isUpdateAvailable;
-exports.setHash = setHash;
-exports.setStatus = setStatus;

package/client/cjs/index.cjs

@@ -1,15 +0,0 @@
-/**
- * @package webpack-dev-service
- * @license MIT
- * @version 0.9.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 events = require('./events.cjs');
-
-exports.off = events.off;
-exports.on = events.on;

package/client/cjs/main.cjs

@@ -1,59 +0,0 @@
-/**
- * @package webpack-dev-service
- * @license MIT
- * @version 0.9.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 client = require('./client.cjs');
-
-/**
- * @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'
-  };
-};
-client(getOptions());

package/client/cjs/ui/overlay.cjs

@@ -1,233 +0,0 @@
-/**
- * @package webpack-dev-service
- * @license MIT
- * @version 0.9.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 utils = require('./utils.cjs');
-
-/**
- * @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 = utils.getRootElement(OVERLAY);
-    utils.injectCSS(CSS, root);
-    const [dialog] = utils.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 = utils.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`);
-    }
-  }
-}
-
-module.exports = Overlay;