webpack-dev-service 0.5.19 → 0.6.0

package/README.md

@@ -202,6 +202,10 @@ app.listen(port, () => {
 });
 ```
 
+### Screenshot
+
+![Screenshot](https://raw.githubusercontent.com/nuintun/webpack-dev-service/main/screenshot.png)
+
 [npm-image]: https://img.shields.io/npm/v/webpack-dev-service?style=flat-square
 [npm-url]: https://www.npmjs.org/package/webpack-dev-service
 [download-image]: https://img.shields.io/npm/dm/webpack-dev-service?style=flat-square

package/client/cjs/client.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.5.19
+ * @version 0.6.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
@@ -52,17 +52,18 @@ function createClient(options) {
     hot.setHash(hash);
   };
   const setProblems = (type, problems) => {
-    const maps = {
-      errors: ['Error', 'error'],
-      warnings: ['Warning', 'warn']
-    };
     if (options.overlay) {
       overlay$1.setProblems(type, problems);
     }
+    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, message } of problems) {
-      debug(`\x1b[0m${name} in ${moduleName}\r\n\x1b[0m${message}`);
+    for (const { moduleName, chunkName, message } of problems) {
+      const filename = moduleName || chunkName || 'unknown';
+      debug(`\x1b[0m${name} in ${filename}\r\n${message}`);
     }
   };
   const onProblems = ({ errors, warnings }) => {

package/client/cjs/events.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.5.19
+ * @version 0.6.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.5.19
+ * @version 0.6.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.5.19
+ * @version 0.6.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.5.19
+ * @version 0.6.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.5.19
+ * @version 0.6.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
@@ -9,7 +9,7 @@
 
 'use strict';
 
-const index = require('./utils/index.cjs');
+const utils = require('./utils.cjs');
 
 /**
  * @module overlay
@@ -17,172 +17,173 @@ const index = require('./utils/index.cjs');
  */
 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;
- }
- `;
+.${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}-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;
+}
+.${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 span,
+.${OVERLAY}-warnings > section > pre span {
+  display: inline-flex;
+}
+.${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>
- `;
+<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}-problems">
+    <article class="${OVERLAY}-errors ${OVERLAY}-hidden"></article>
+    <article class="${OVERLAY}-warnings ${OVERLAY}-hidden"></article>
+  </aside>
+</div>
+`;
 class Overlay {
   constructor(name) {
     this.hidden = true;
-    index.injectCSS(CSS);
-    [this.aside] = index.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`);
+    utils.injectCSS(CSS);
+    const [dialog] = utils.appendHTML(HTML);
+    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();
@@ -199,10 +200,10 @@ class Overlay {
     if (count > 0) {
       let html = '';
       problemTitle.innerText = `${count} ${name}(s)`;
-      for (const { moduleName = 'unknown', message } of problems) {
-        const src = index.ansiToHTML(moduleName);
-        const details = index.ansiToHTML(message);
-        html += `<div><em>${name}</em> in ${src}<div>${details}</div></div>`;
+      for (const { moduleName, chunkName, message } of problems) {
+        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);
@@ -215,13 +216,13 @@ class Overlay {
   show() {
     if (this.hidden) {
       this.hidden = false;
-      this.aside.classList.add(`${OVERLAY}-show`);
+      this.dialog.classList.add(`${OVERLAY}-show`);
     }
   }
   hide() {
     if (!this.hidden) {
       this.hidden = true;
-      this.aside.classList.remove(`${OVERLAY}-show`);
+      this.dialog.classList.remove(`${OVERLAY}-show`);
     }
   }
 }

package/client/cjs/ui/progress.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.5.19
+ * @version 0.6.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
@@ -9,7 +9,7 @@
 
 'use strict';
 
-const index = require('./utils/index.cjs');
+const utils = require('./utils.cjs');
 
 /**
  * @module progress
@@ -19,51 +19,51 @@ const index = require('./utils/index.cjs');
 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);
- }
- `;
+.${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>
- `;
+<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;
-    index.injectCSS(CSS);
-    [this.svg] = index.appendHTML(HTML);
+    utils.injectCSS(CSS);
+    [this.svg] = utils.appendHTML(HTML);
     this.track = this.svg.querySelector(`.${PROGRESS}-track`);
   }
   update(value) {

package/client/cjs/ui/{utils/index.cjs → utils.cjs}

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.5.19
+ * @version 0.6.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
@@ -9,12 +9,18 @@
 
 'use strict';
 
-const index = require('./ansi/index.cjs');
+const Ansi = require('@nuintun/ansi');
+
+function _interopDefault(e) {
+  return e && e.__esModule ? e : { default: e };
+}
+
+const Ansi__default = /*#__PURE__*/ _interopDefault(Ansi);
 
 /**
  * @module utils
  */
-const ansi = new index();
+const ansi = new Ansi__default.default();
 const defaultStyleElement = document.createElement('style');
 function injectCSS(css, styleElement = defaultStyleElement) {
   const { head } = document;
@@ -58,19 +64,19 @@ function blockToHTML({ style, value, url }) {
   const styles = [];
   const textDecorations = [];
   if (style.dim) {
-    styles.push(`opacity:0.5`);
+    styles.push(`opacity: 0.5`);
   }
   if (style.bold) {
-    styles.push(`font-weight:bold`);
+    styles.push(`font-weight: bold`);
   }
   if (style.italic) {
-    styles.push(`font-style:italic`);
+    styles.push(`font-style: italic`);
   }
   if (style.inverse) {
-    styles.push(`filter:invert(1)`);
+    styles.push(`filter: invert(1)`);
   }
   if (style.hidden) {
-    styles.push(`visibility:hidden`);
+    styles.push(`visibility: hidden`);
   }
   if (style.blink) {
     textDecorations.push('blink');
@@ -86,23 +92,23 @@ function blockToHTML({ style, value, url }) {
   }
   const { color, background } = style;
   if (color) {
-    styles.push(`color:rgb(${color})`);
+    styles.push(`color: rgb(${color})`);
   }
   if (background) {
-    styles.push(`background-color:rgb(${background})`);
+    styles.push(`background-color: rgb(${background})`);
   }
   if (textDecorations.length > 0) {
-    styles.push(`text-decoration:${textDecorations.join(' ')}`);
+    styles.push(`text-decoration: ${textDecorations.join(' ')}`);
   }
   const escapedValue = escapeHTML(value);
-  const href = url ? JSON.stringify(escapeHTML(url)) : null;
+  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(';')};`);
+  const inlineStyle = JSON.stringify(`${styles.join('; ')};`);
   if (!href) {
     return `<span style=${inlineStyle}>${escapedValue}</span>`;
   }