webpack-dev-service 0.10.0 → 0.10.1

package/cjs/server/hot/Socket.cjs

@@ -0,0 +1,185 @@
+/**
+ * @package webpack-dev-service
+ * @license MIT
+ * @version 0.10.1
+ * @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 url = require('url');
+const path = require('path');
+const WebSocket = require('ws');
+const webpack = require('webpack');
+const utils$1 = require('../utils.cjs');
+const utils = require('./utils.cjs');
+
+function _interopDefault(e) {
+  return e && e.__esModule ? e : { default: e };
+}
+
+const WebSocket__default = /*#__PURE__*/ _interopDefault(WebSocket);
+const webpack__default = /*#__PURE__*/ _interopDefault(webpack);
+
+/**
+ * @module Socket
+ */
+function entrypoint() {
+  const filename = require.main.filename;
+  try {
+    return path.dirname(url.fileURLToPath(filename));
+  } catch (_a) {
+    return path.dirname(filename);
+  }
+}
+const client = path.resolve(entrypoint(), '../../client/main.cjs');
+class Socket {
+  constructor(compiler, options) {
+    this.stats = null;
+    this.compiler = compiler;
+    this.options = utils.getOptions(options);
+    this.server = new WebSocket.WebSocketServer({
+      noServer: true,
+      path: this.options.path
+    });
+    this.logger = compiler.getInfrastructureLogger(utils$1.PLUGIN_NAME);
+    this.setupWss();
+    this.setupHooks();
+    this.setupPlugins();
+  }
+  setupWss() {
+    const { server, logger } = this;
+    server.on('connection', client => {
+      if (this.stats) {
+        this.broadcastStats([client], this.stats);
+      }
+      logger.log('client connected');
+    });
+    server.on('error', error => {
+      logger.error(error);
+    });
+    server.on('close', function () {
+      logger.log('client disconnected');
+    });
+  }
+  setupHooks() {
+    const { compiler } = this;
+    const { hooks } = compiler;
+    const statsOptions = utils.getStatsOptions(compiler);
+    hooks.done.tap(utils$1.PLUGIN_NAME, stats => {
+      // Get json stats.
+      const jsonStats = stats.toJson(statsOptions);
+      // Hack builtAt.
+      if (jsonStats.builtAt == null) {
+        jsonStats.builtAt = utils.getTimestamp(jsonStats);
+      }
+      // Cache stats.
+      this.stats = jsonStats;
+      // Do the stuff in nextTick, because bundle may be invalidated if a change happened while compiling.
+      process.nextTick(() => {
+        const { stats } = this;
+        // Broadcast stats.
+        if (stats) {
+          this.broadcastStats(this.clients(), stats);
+        }
+      });
+    });
+    hooks.invalid.tap(utils$1.PLUGIN_NAME, (path, timestamp) => {
+      // Set stats to null.
+      this.stats = null;
+      // Broadcast invalid.
+      this.broadcast(this.clients(), 'invalid', { path, timestamp });
+    });
+  }
+  setupPlugins() {
+    const { options, compiler } = this;
+    const compilers = utils$1.getCompilers(compiler);
+    const plugins = [
+      () => {
+        return new webpack__default.default.NoEmitOnErrorsPlugin();
+      },
+      () => {
+        return new webpack__default.default.HotModuleReplacementPlugin();
+      },
+      ({ name, context }) => {
+        const params = new URLSearchParams();
+        params.set('path', options.path);
+        params.set('name', name || 'webpack');
+        params.set('hmr', options.hmr ? 'true' : 'false');
+        params.set('wss', options.wss ? 'true' : 'false');
+        params.set('reload', options.reload ? 'true' : 'false');
+        params.set('overlay', options.overlay ? 'true' : 'false');
+        params.set('progress', options.progress ? 'true' : 'false');
+        // Auto add hot client to entry.
+        return new webpack__default.default.EntryPlugin(context, `${client}?${params}`, {
+          // Don't create runtime.
+          runtime: false
+        });
+      }
+    ];
+    for (const compiler of compilers) {
+      for (const plugin of plugins) {
+        plugin(compiler).apply(compiler);
+      }
+    }
+    if (options.progress) {
+      let value = 0;
+      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 });
+        }
+      }).apply(compiler);
+    }
+  }
+  clients() {
+    return this.server.clients;
+  }
+  upgrade(context) {
+    const { server } = this;
+    const { req: request } = context;
+    if (utils.isUpgradable(context, utils.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, errors, warnings, builtAt: timestamp } = stats;
+      this.broadcast(clients, 'hash', { hash, timestamp });
+      if (utils.hasIssues(errors) || utils.hasIssues(warnings)) {
+        this.broadcast(clients, 'issues', { errors, warnings, timestamp });
+      } else {
+        this.broadcast(clients, 'ok', { timestamp });
+      }
+    }
+  }
+}
+
+exports.Socket = Socket;

package/cjs/server/hot/index.cjs

@@ -0,0 +1,34 @@
+/**
+ * @package webpack-dev-service
+ * @license MIT
+ * @version 0.10.1
+ * @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 Socket = require('./Socket.cjs');
+
+/**
+ * @module index
+ */
+function hot(compiler, options) {
+  const socket = new Socket.Socket(compiler, options);
+  const middleware = async (ctx, next) => {
+    if (!socket.upgrade(ctx)) {
+      await next();
+    }
+  };
+  return Object.assign(middleware, {
+    clients() {
+      return socket.clients();
+    },
+    broadcast(clients, action, payload) {
+      socket.broadcast(clients, action, payload);
+    }
+  });
+}
+
+exports.hot = hot;

package/cjs/server/hot/utils.cjs

@@ -0,0 +1,100 @@
+/**
+ * @package webpack-dev-service
+ * @license MIT
+ * @version 0.10.1
+ * @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 utils
+ */
+const WEBSOCKET_RE = /^websocket$/i;
+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 getOptions(options) {
+  const settings = {
+    hmr: true,
+    wss: false,
+    path: '/hot',
+    reload: true,
+    overlay: true,
+    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 hasIssues(issues) {
+  return Array.isArray(issues) && issues.length > 0;
+}
+function normalizeStatsOptions(statsOptions) {
+  if (!utils.isObject(statsOptions)) {
+    statsOptions = {};
+  }
+  return {
+    ...statsOptions,
+    all: false,
+    hash: true,
+    colors: true,
+    errors: true,
+    assets: false,
+    builtAt: true,
+    warnings: true,
+    errorDetails: false
+  };
+}
+function getStatsOptions(compiler) {
+  if (utils.isMultiCompilerMode(compiler)) {
+    return {
+      children: compiler.compilers.map(({ options }) => {
+        return normalizeStatsOptions(options.stats);
+      })
+    };
+  }
+  return normalizeStatsOptions(compiler.options.stats);
+}
+function getTimestamp({ builtAt, children = [] }) {
+  if (builtAt != null) {
+    return builtAt;
+  }
+  let timestamp = -1;
+  for (const { builtAt = timestamp } of children) {
+    if (builtAt > timestamp) {
+      timestamp = builtAt;
+    }
+  }
+  return timestamp < 0 ? Date.now() : timestamp;
+}
+
+exports.WEBSOCKET_RE = WEBSOCKET_RE;
+exports.getOptions = getOptions;
+exports.getStatsOptions = getStatsOptions;
+exports.getTimestamp = getTimestamp;
+exports.hasIssues = hasIssues;
+exports.isUpgradable = isUpgradable;

package/cjs/server/index.cjs

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

@@ -0,0 +1,127 @@
+/**
+ * @package webpack-dev-service
+ * @license MIT
+ * @version 0.10.1
+ * @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 schema
+ */
+const schema = {
+  type: 'object',
+  properties: {
+    hot: {
+      description: 'Enable or disable HMR server.',
+      anyOf: [
+        {
+          type: 'boolean',
+          enum: [false]
+        },
+        {
+          type: 'object',
+          properties: {
+            hmr: {
+              type: 'boolean',
+              description: 'Enable or disable Hot Module Replacement.'
+            },
+            path: {
+              type: 'string',
+              description: 'Specify the path used by the HMR server.'
+            },
+            wss: {
+              type: 'boolean',
+              description: 'Use WebSockets Secure (wss://) for HMR instead of the default WebSocket (ws://).'
+            },
+            reload: {
+              type: 'boolean',
+              description: 'Control whether the full page should be reloaded when HMR failure.'
+            },
+            overlay: {
+              type: 'boolean',
+              description: 'Enable or disable an error overlay in the browser when there are compilation errors.'
+            },
+            progress: {
+              type: 'boolean',
+              description: 'Display a progress bar in the browser during the build process.'
+            }
+          },
+          additionalProperties: false
+        }
+      ]
+    },
+    ignore: {
+      instanceof: 'Function',
+      description: 'Function that determines if a file should be ignored.'
+    },
+    etag: {
+      type: 'boolean',
+      description: 'Enable or disable the ETag functionality for file serving.'
+    },
+    acceptRanges: {
+      type: 'boolean',
+      description: 'Indicate whether the server supports range requests for file resources.'
+    },
+    lastModified: {
+      type: 'boolean',
+      description: 'Enable or disable sending last modified headers for file resources.'
+    },
+    headers: {
+      description: 'Headers to serve with files.',
+      anyOf: [
+        {
+          type: 'object',
+          additionalProperties: {
+            anyOf: [
+              {
+                type: 'string'
+              },
+              {
+                type: 'array',
+                items: {
+                  type: 'string'
+                }
+              }
+            ]
+          },
+          description: 'Headers object to serve with files.'
+        },
+        {
+          instanceof: 'Function',
+          description: 'Function that returns headers to serve with files.'
+        }
+      ]
+    },
+    fs: {
+      type: 'object',
+      description: 'The output file system used by the dev server.'
+    },
+    stats: {
+      type: 'object',
+      description: 'Options for the statistics output.'
+    },
+    writeToDisk: {
+      anyOf: [
+        {
+          type: 'boolean',
+          description: 'Enable or disable writing files to disk.'
+        },
+        {
+          instanceof: 'Function',
+          description: 'Function that determines if a file should be written to disk based on its target path.'
+        }
+      ]
+    },
+    onCompilerDone: {
+      instanceof: 'Function',
+      description: 'Callback function when the compiler is done, providing statistics and options.'
+    }
+  },
+  additionalProperties: false
+};
+
+exports.schema = schema;

package/cjs/server/utils.cjs

@@ -0,0 +1,45 @@
+/**
+ * @package webpack-dev-service
+ * @license MIT
+ * @version 0.10.1
+ * @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 utils
+ */
+const { toString } = Object.prototype;
+const PLUGIN_NAME = 'webpack-dev-service';
+function isObject(value) {
+  return toString.call(value) === '[object Object]';
+}
+function isString(value) {
+  return toString.call(value) === '[object String]';
+}
+function isBoolean(value) {
+  return toString.call(value) === '[object Boolean]';
+}
+function isFunction(value) {
+  return typeof value === 'function';
+}
+function getCompilers(compiler) {
+  if (isMultiCompilerMode(compiler)) {
+    return compiler.compilers;
+  }
+  return [compiler];
+}
+function isMultiCompilerMode(compiler) {
+  return 'compilers' in compiler;
+}
+
+exports.PLUGIN_NAME = PLUGIN_NAME;
+exports.getCompilers = getCompilers;
+exports.isBoolean = isBoolean;
+exports.isFunction = isFunction;
+exports.isMultiCompilerMode = isMultiCompilerMode;
+exports.isObject = isObject;
+exports.isString = isString;

package/esm/client/client.js

@@ -0,0 +1,126 @@
+/**
+ * @package webpack-dev-service
+ * @license MIT
+ * @version 0.10.1
+ * @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 { emit } from './events.js';
+import Overlay from './ui/overlay.js';
+import Progress from './ui/progress.js';
+import { applyUpdate, setHash } from './hot.js';
+
+/**
+ * @module client
+ */
+function createClient(options) {
+  let updateTimer;
+  const UPDATE_DELAY = 128;
+  const RETRY_INTERVAL = 3000;
+  const progress = new Progress();
+  const overlay = 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(() => {
+      applyUpdate(options.hmr, fallback);
+    }, UPDATE_DELAY);
+  };
+  const onInvalid = () => {
+    clearTimeout(updateTimer);
+    if (options.progress) {
+      progress.update(0);
+      progress.show();
+    }
+  };
+  const onProgress = ({ value }) => {
+    if (options.progress) {
+      progress.update(value);
+    }
+  };
+  const onHash = ({ hash }) => {
+    setHash(hash);
+  };
+  const setIssues = (type, issues) => {
+    if (options.overlay) {
+      overlay.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.hide();
+    setIssues('errors', errors);
+    setIssues('warnings', warnings);
+    if (options.overlay) {
+      overlay.show();
+    }
+    if (errors.length <= 0) {
+      applyUpdateAsync();
+    }
+  };
+  const onOk = () => {
+    overlay.hide();
+    progress.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;
+        }
+        emit(action, payload, options);
+      }
+    };
+    ws.onclose = () => {
+      overlay.hide();
+      progress.hide();
+      setTimeout(() => {
+        createWebSocket(url);
+      }, RETRY_INTERVAL);
+    };
+  };
+  createWebSocket(`${options.origin}${options.path}`);
+}
+
+export { createClient as default };

package/esm/client/events.js

@@ -0,0 +1,60 @@
+/**
+ * @package webpack-dev-service
+ * @license MIT
+ * @version 0.10.1
+ * @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 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);
+    }
+  }
+}
+
+export { emit, off, on };