webpack-dev-service 0.6.0 → 0.7.0

package/client/cjs/client.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.6.0
+ * @version 0.7.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
@@ -63,7 +63,7 @@ function createClient(options) {
     const debug = console[method];
     for (const { moduleName, chunkName, message } of problems) {
       const filename = moduleName || chunkName || 'unknown';
-      debug(`\x1b[0m${name} in ${filename}\r\n${message}`);
+      debug(`${name} in ${filename}\n${message}`);
     }
   };
   const onProblems = ({ errors, warnings }) => {

package/client/cjs/events.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.6.0
+ * @version 0.7.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/client/cjs/hot.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.6.0
+ * @version 0.7.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/client/cjs/index.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.6.0
+ * @version 0.7.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/client/cjs/main.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.6.0
+ * @version 0.7.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/client/cjs/ui/overlay.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.6.0
+ * @version 0.7.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
@@ -149,6 +149,8 @@ const CSS = `
   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;
@@ -175,8 +177,9 @@ const HTML = `
 class Overlay {
   constructor(name) {
     this.hidden = true;
-    utils.injectCSS(CSS);
-    const [dialog] = utils.appendHTML(HTML);
+    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`);

package/client/cjs/ui/progress.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.6.0
+ * @version 0.7.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
@@ -62,8 +62,9 @@ const HTML = `
 class Progress {
   constructor() {
     this.hidden = true;
-    utils.injectCSS(CSS);
-    [this.svg] = utils.appendHTML(HTML);
+    const root = utils.getRootElement(PROGRESS);
+    utils.injectCSS(CSS, root);
+    [this.svg] = utils.appendHTML(HTML, root);
     this.track = this.svg.querySelector(`.${PROGRESS}-track`);
   }
   update(value) {

package/client/cjs/ui/utils.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.6.0
+ * @version 0.7.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
@@ -21,27 +21,6 @@ const Ansi__default = /*#__PURE__*/ _interopDefault(Ansi);
  * @module utils
  */
 const ansi = new Ansi__default.default();
-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) {
@@ -124,9 +103,34 @@ function ansiToHTML(text) {
   });
   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;
+}
 
 exports.ansiToHTML = ansiToHTML;
 exports.appendHTML = appendHTML;
 exports.blockToHTML = blockToHTML;
 exports.escapeHTML = escapeHTML;
+exports.getRootElement = getRootElement;
 exports.injectCSS = injectCSS;

package/client/esm/client.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.6.0
+ * @version 0.7.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
@@ -61,7 +61,7 @@ function createClient(options) {
     const debug = console[method];
     for (const { moduleName, chunkName, message } of problems) {
       const filename = moduleName || chunkName || 'unknown';
-      debug(`\x1b[0m${name} in ${filename}\r\n${message}`);
+      debug(`${name} in ${filename}\n${message}`);
     }
   };
   const onProblems = ({ errors, warnings }) => {

package/client/esm/events.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.6.0
+ * @version 0.7.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/client/esm/hot.js

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

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

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.6.0
+ * @version 0.7.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/client/esm/ui/overlay.js

@@ -1,13 +1,13 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.6.0
+ * @version 0.7.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.js';
+import { getRootElement, injectCSS, appendHTML, ansiToHTML } from './utils.js';
 
 /**
  * @module overlay
@@ -147,6 +147,8 @@ const CSS = `
   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;
@@ -173,8 +175,9 @@ const HTML = `
 class Overlay {
   constructor(name) {
     this.hidden = true;
-    injectCSS(CSS);
-    const [dialog] = appendHTML(HTML);
+    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`);

package/client/esm/ui/progress.js

@@ -1,13 +1,13 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.6.0
+ * @version 0.7.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.js';
+import { getRootElement, injectCSS, appendHTML } from './utils.js';
 
 /**
  * @module progress
@@ -60,8 +60,9 @@ const HTML = `
 class Progress {
   constructor() {
     this.hidden = true;
-    injectCSS(CSS);
-    [this.svg] = appendHTML(HTML);
+    const root = getRootElement(PROGRESS);
+    injectCSS(CSS, root);
+    [this.svg] = appendHTML(HTML, root);
     this.track = this.svg.querySelector(`.${PROGRESS}-track`);
   }
   update(value) {

package/client/esm/ui/utils.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.6.0
+ * @version 0.7.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
@@ -13,27 +13,6 @@ import Ansi from '@nuintun/ansi';
  * @module utils
  */
 const ansi = new Ansi();
-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) {
@@ -116,5 +95,29 @@ function ansiToHTML(text) {
   });
   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, injectCSS };
+export { ansiToHTML, appendHTML, blockToHTML, escapeHTML, getRootElement, injectCSS };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpack-dev-service",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "A koa 2 middleware for webpack development and hot reloading.",
   "type": "module",
   "sideEffects": [
@@ -87,7 +87,7 @@
   },
   "dependencies": {
     "@nuintun/ansi": "^0.0.3",
-    "@types/koa": "^2.13.12",
+    "@types/koa": "^2.15.0",
     "@types/ws": "^8.5.10",
     "koa-compose": "^4.1.0",
     "tslib": "^2.6.2",
@@ -95,26 +95,26 @@
     "ws": "^8.16.0"
   },
   "devDependencies": {
-    "@rollup/plugin-typescript": "^11.1.5",
-    "@swc/core": "^1.3.101",
-    "@swc/helpers": "^0.5.3",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@swc/core": "^1.4.8",
+    "@swc/helpers": "^0.5.6",
     "@types/koa-compose": "^3.2.8",
-    "@types/node": "^20.10.5",
-    "css-loader": "^6.8.1",
+    "@types/node": "^20.11.28",
+    "css-loader": "^6.10.0",
     "html-webpack-plugin": "^5.6.0",
-    "koa": "^2.14.2",
-    "magic-string": "^0.30.5",
-    "memfs": "^4.6.0",
-    "mini-css-extract-plugin": "^2.7.6",
-    "prettier": "^3.1.1",
+    "koa": "^2.15.1",
+    "magic-string": "^0.30.8",
+    "memfs": "^4.7.7",
+    "mini-css-extract-plugin": "^2.8.1",
+    "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
-    "rollup": "^4.9.1",
-    "swc-loader": "^0.2.3",
+    "rollup": "^4.13.0",
+    "swc-loader": "^0.2.6",
     "tsc-alias": "^1.8.8",
-    "typescript": "^5.3.3",
-    "webpack": "^5.89.0"
+    "typescript": "^5.4.2",
+    "webpack": "^5.90.3"
   },
   "peerDependencies": {
     "webpack": "^5.0.0"

package/server/cjs/dev.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.6.0
+ * @version 0.7.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/server/cjs/hot.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.6.0
+ * @version 0.7.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/server/cjs/index.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.6.0
+ * @version 0.7.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/server/esm/dev.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.6.0
+ * @version 0.7.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/server/esm/hot.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.6.0
+ * @version 0.7.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/server/esm/index.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.6.0
+ * @version 0.7.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/types/client/ui/utils.d.ts

@@ -2,8 +2,14 @@
  * @module utils
  */
 import { AnsiBlock } from '@nuintun/ansi';
-export declare function injectCSS(css: string, styleElement?: HTMLStyleElement): HTMLStyleElement;
-export declare function appendHTML(html: string, parent?: HTMLElement): ChildNode[];
 export declare function escapeHTML(text: string): string;
 export declare function blockToHTML({ style, value, url }: AnsiBlock): string;
 export declare function ansiToHTML(text: string): string;
+export type RootElement = HTMLElement | ShadowRoot;
+export declare function getRootElement(tagName: string): ShadowRoot;
+export declare function injectCSS(
+  css: string,
+  root?: HTMLElement | ShadowRoot,
+  styleElement?: HTMLStyleElement
+): HTMLStyleElement;
+export declare function appendHTML(html: string, root?: RootElement): ChildNode[];