webpack-dev-service 0.1.0

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

@@ -0,0 +1,120 @@
+/**
+ * @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 Ansi from './ansi/index.js';
+
+/**
+ * @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) {
+      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;
+}
+
+export { ansiToHTML, appendHTML, blockToHTML, escapeHTML, injectCSS };

package/global.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @module global.d.ts
+ */
+
+/// <reference types="webpack/module" />
+
+declare const __WDS_HOT_OPTIONS__: {
+  hmr: boolean;
+  name: string;
+  path: string;
+  progress: boolean;
+};
+
+declare type HotUpdateStatus = `${webpack.HotUpdateStatus}`;

package/package.json

@@ -0,0 +1,121 @@
+{
+  "name": "webpack-dev-service",
+  "version": "0.1.0",
+  "description": "A koa 2 middleware for webpack development and hot reloading.",
+  "type": "module",
+  "sideEffects": [
+    "client/esm/main.js",
+    "client/cjs/main.cjs"
+  ],
+  "main": "server/cjs/index.cjs",
+  "module": "server/esm/index.js",
+  "types": "types/server/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./server/esm/index.js",
+      "require": "./server/cjs/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",
+      "types": "./types/client/index.d.ts"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "client": [
+        "./types/client/main.d.ts"
+      ],
+      "events": [
+        "./types/client/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "types",
+    "server",
+    "client",
+    "index.d.ts",
+    "client.d.ts",
+    "global.d.ts"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nuintun/webpack-dev-service.git"
+  },
+  "keywords": [
+    "dev",
+    "koa",
+    "server",
+    "webpack",
+    "middleware"
+  ],
+  "author": {
+    "name": "nuintun",
+    "email": "nuintun@qq.com"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/nuintun/webpack-dev-service/issues"
+  },
+  "homepage": "https://github.com/nuintun/webpack-dev-service#readme",
+  "scripts": {
+    "lint": "tsc --noEmit",
+    "clean": "node tools/clean.js",
+    "format": "prettier --write .",
+    "prepublishOnly": "npm run build",
+    "test": "cd tests && node webpack.js",
+    "build:cjs": "rollup -c tools/rollup.cjs.js",
+    "build:esm": "rollup -c tools/rollup.esm.js",
+    "build": "npm run clean && npm run build:main && npm run format",
+    "build:main": "npm run build:cjs && npm run build:esm && npm run build:types",
+    "build:types": "tsc --declaration --emitDeclarationOnly --declarationDir types"
+  },
+  "dependencies": {
+    "@types/koa": "^2.13.6",
+    "@types/ws": "^8.5.4",
+    "koa-compose": "^4.1.0",
+    "tslib": "^2.5.0",
+    "webpack-dev-middleware": "^6.1.0",
+    "ws": "^8.13.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^11.1.0",
+    "@swc/core": "^1.3.57",
+    "@swc/helpers": "^0.5.1",
+    "@types/koa-compose": "^3.2.5",
+    "@types/node": "^20.1.2",
+    "css-loader": "^6.7.3",
+    "html-webpack-plugin": "^5.5.1",
+    "koa": "^2.14.2",
+    "magic-string": "^0.30.0",
+    "memfs": "^3.5.1",
+    "mini-css-extract-plugin": "^2.7.5",
+    "prettier": "^2.8.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^5.0.0",
+    "rollup": "^3.21.6",
+    "swc-loader": "^0.2.3",
+    "typescript": "^5.0.4",
+    "webpack": "^5.82.1"
+  },
+  "optionalDependencies": {
+    "bufferutil": ">=4.0.0",
+    "utf-8-validate": ">=5.0.0"
+  },
+  "peerDependencies": {
+    "webpack": "^5.0.0"
+  }
+}

package/server/cjs/dev.cjs

@@ -0,0 +1,50 @@
+/**
+ * @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 webpackDevMiddleware = require('webpack-dev-middleware');
+
+function _interopDefault(e) {
+  return e && e.__esModule ? e : { default: e };
+}
+
+const webpackDevMiddleware__default = /*#__PURE__*/ _interopDefault(webpackDevMiddleware);
+
+/**
+ * @module dev
+ */
+function dev(compiler, options) {
+  const middleware = webpackDevMiddleware__default.default(compiler, options);
+  const devMiddleware = async (context, next) => {
+    context.remove('Content-Type');
+    await middleware(
+      context.req,
+      {
+        locals: context.state,
+        send(body) {
+          context.body = body;
+        },
+        status(statusCode) {
+          context.status = statusCode;
+        },
+        set(field, value) {
+          context.response.set(field, value);
+        },
+        get(field) {
+          return context.response.get(field);
+        }
+      },
+      next
+    );
+  };
+  return Object.assign(devMiddleware, middleware);
+}
+
+module.exports = dev;

package/server/cjs/hot.cjs

@@ -0,0 +1,216 @@
+/**
+ * @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 WebSocket = require('ws');
+const webpack = require('webpack');
+
+function _interopDefault(e) {
+  return e && e.__esModule ? e : { default: e };
+}
+
+const WebSocket__default = /*#__PURE__*/ _interopDefault(WebSocket);
+const webpack__default = /*#__PURE__*/ _interopDefault(webpack);
+
+/**
+ * @module hot
+ */
+const WEBSOCKET_RE = /^websocket$/i;
+function isObject(value) {
+  return Object.prototype.toString.call(value) === '[object Object]';
+}
+function resolveStatsOptions(compiler) {
+  const options = {
+    all: false,
+    hash: true,
+    colors: true,
+    errors: true,
+    assets: false,
+    builtAt: true,
+    warnings: true,
+    errorDetails: false
+  };
+  const { stats } = compiler.options;
+  if (isObject(stats)) {
+    const { warningsFilter } = stats;
+    if (warningsFilter !== undefined) {
+      options.warningsFilter = warningsFilter;
+    }
+  }
+  return options;
+}
+function normalize(path) {
+  const segments = [];
+  const parts = path.split(/[\\/]+/);
+  for (const segment of parts) {
+    switch (segment) {
+      case '.':
+        break;
+      case '..':
+        segments.pop();
+        break;
+      default:
+        segments.push(segment);
+        break;
+    }
+  }
+  const pathname = segments.join('/');
+  return pathname.startsWith('/') ? pathname : `/${pathname}`;
+}
+function resolveOptions(options) {
+  const settings = {
+    hmr: true,
+    path: '/hot',
+    progress: true,
+    ...options
+  };
+  settings.path = normalize(settings.path);
+  return settings;
+}
+function isUpgradable(context, detector) {
+  const { upgrade } = context.headers;
+  return !!upgrade && detector.test(upgrade.trim());
+}
+function hasProblems(problems) {
+  return !!problems && problems.length > 0;
+}
+class HotServer {
+  stats;
+  compiler;
+  server;
+  options;
+  name = 'webpack-hot-middleware';
+  logger;
+  constructor(compiler, options) {
+    this.compiler = compiler;
+    this.options = resolveOptions(options);
+    this.logger = compiler.getInfrastructureLogger(this.name);
+    this.server = new WebSocket.WebSocketServer({ path: this.options.path, noServer: true });
+    this.setup();
+  }
+  setup() {
+    this.setupWss();
+    this.setupHooks();
+    this.setupPlugins();
+  }
+  setupWss() {
+    const { server, logger } = this;
+    server.on('error', error => {
+      logger.error(error.message);
+    });
+    server.on('connection', client => {
+      if (this.stats) {
+        this.broadcastStats([client], this.stats);
+      }
+    });
+  }
+  setupHooks() {
+    const { compiler } = this;
+    const { hooks } = compiler;
+    const statsOptions = resolveStatsOptions(compiler);
+    hooks.done.tapAsync(this.name, (stats, next) => {
+      next();
+      this.stats = stats.toJson(statsOptions);
+      this.broadcastStats(this.clients(), this.stats);
+    });
+    hooks.invalid.tap(this.name, (path, builtAt) => {
+      this.broadcast(this.clients(), 'invalid', { path, builtAt });
+    });
+  }
+  setupPlugins() {
+    const { options, compiler } = this;
+    const plugins = [
+      new webpack__default.default.NoEmitOnErrorsPlugin(),
+      new webpack__default.default.DefinePlugin({
+        __WDS_HOT_OPTIONS__: JSON.stringify({ ...options, name: compiler.name })
+      })
+    ];
+    if (options.hmr) {
+      plugins.push(new webpack__default.default.HotModuleReplacementPlugin());
+    }
+    if (options.progress) {
+      let value = 0;
+      plugins.push(
+        new webpack__default.default.ProgressPlugin((percentage, status, message) => {
+          const nextValue = Math.floor(percentage * 100);
+          if (nextValue > value || nextValue === 0) {
+            value = nextValue;
+            switch (value) {
+              case 0:
+                status = 'start';
+                message = 'end idle';
+                break;
+              case 100:
+                status = 'finish';
+                message = 'begin idle';
+                break;
+            }
+            this.broadcast(this.clients(), 'progress', { status, message, value });
+          }
+        })
+      );
+    }
+    for (const plugin of plugins) {
+      plugin.apply(compiler);
+    }
+  }
+  clients() {
+    return this.server.clients;
+  }
+  upgrade(context) {
+    const { server } = this;
+    const { req: request } = context;
+    if (isUpgradable(context, WEBSOCKET_RE) && server.shouldHandle(request)) {
+      context.respond = false;
+      const { socket } = context;
+      const head = Buffer.alloc(0);
+      server.handleUpgrade(request, socket, head, client => {
+        server.emit('connection', client, request);
+      });
+      return true;
+    }
+    return false;
+  }
+  broadcast(clients, action, payload) {
+    for (const client of clients) {
+      if (client.readyState === WebSocket__default.default.OPEN) {
+        client.send(JSON.stringify({ action, payload }));
+      }
+    }
+  }
+  broadcastStats(clients, stats) {
+    if (clients.size > 0 || clients.length > 0) {
+      const { hash, builtAt, errors, warnings } = stats;
+      this.broadcast(clients, 'hash', { hash });
+      if (hasProblems(errors) || hasProblems(warnings)) {
+        this.broadcast(clients, 'problems', { errors, warnings, builtAt });
+      } else {
+        this.broadcast(clients, 'ok', { builtAt });
+      }
+    }
+  }
+}
+function hot(compiler, options = {}) {
+  const server = new HotServer(compiler, options);
+  const hotMiddleware = async (context, next) => {
+    if (!server.upgrade(context)) {
+      await next();
+    }
+  };
+  hotMiddleware.clients = () => {
+    return server.clients();
+  };
+  hotMiddleware.broadcast = (clients, action, payload) => {
+    server.broadcast(clients, action, payload);
+  };
+  return hotMiddleware;
+}
+
+module.exports = hot;

package/server/cjs/index.cjs

@@ -0,0 +1,33 @@
+/**
+ * @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 compose = require('koa-compose');
+const dev = require('./dev.cjs');
+const hot = require('./hot.cjs');
+
+function _interopDefault(e) {
+  return e && e.__esModule ? e : { default: e };
+}
+
+const compose__default = /*#__PURE__*/ _interopDefault(compose);
+
+/**
+ * @module index
+ */
+function server(compiler, options = {}) {
+  const { hot: hotOptions, ...devOptions } = options;
+  const devMiddleware = dev(compiler, devOptions);
+  if (hotOptions === false) return devMiddleware;
+  const hotMiddleware = hot(compiler, hotOptions);
+  return Object.assign(compose__default.default([devMiddleware, hotMiddleware]), devMiddleware, hotMiddleware);
+}
+
+module.exports = server;

package/server/esm/dev.js

@@ -0,0 +1,42 @@
+/**
+ * @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 webpackDevMiddleware from 'webpack-dev-middleware';
+
+/**
+ * @module dev
+ */
+function dev(compiler, options) {
+  const middleware = webpackDevMiddleware(compiler, options);
+  const devMiddleware = async (context, next) => {
+    context.remove('Content-Type');
+    await middleware(
+      context.req,
+      {
+        locals: context.state,
+        send(body) {
+          context.body = body;
+        },
+        status(statusCode) {
+          context.status = statusCode;
+        },
+        set(field, value) {
+          context.response.set(field, value);
+        },
+        get(field) {
+          return context.response.get(field);
+        }
+      },
+      next
+    );
+  };
+  return Object.assign(devMiddleware, middleware);
+}
+
+export { dev as default };