webpack-dev-service 0.1.0

package/server/esm/hot.js

@@ -0,0 +1,207 @@
+/**
+ * @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 WebSocket, { WebSocketServer } from 'ws';
+import webpack from '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 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.NoEmitOnErrorsPlugin(),
+      new webpack.DefinePlugin({
+        __WDS_HOT_OPTIONS__: JSON.stringify({ ...options, name: compiler.name })
+      })
+    ];
+    if (options.hmr) {
+      plugins.push(new webpack.HotModuleReplacementPlugin());
+    }
+    if (options.progress) {
+      let value = 0;
+      plugins.push(
+        new webpack.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.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;
+}
+
+export { hot as default };

package/server/esm/index.js

@@ -0,0 +1,25 @@
+/**
+ * @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 compose from 'koa-compose';
+import dev from './dev.js';
+import hot from './hot.js';
+
+/**
+ * @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([devMiddleware, hotMiddleware]), devMiddleware, hotMiddleware);
+}
+
+export { server as default };

package/types/client/client.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @module client
+ */
+export interface Options {
+  readonly hmr: boolean;
+  readonly name: string;
+  readonly host: string;
+  readonly path: string;
+  readonly live: boolean;
+  readonly overlay: boolean;
+  readonly progress: boolean;
+}
+export default function createClient(options: Options): void;

package/types/client/events.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @module events
+ */
+import { Options } from './client';
+import * as Message from './message';
+interface Messages {
+  ok: Message.OK['payload'];
+  hash: Message.Hash['payload'];
+  invalid: Message.Invalid['payload'];
+  problems: Message.Problems['payload'];
+  progress: Message.Progress['payload'];
+}
+interface Events {
+  ok: (message: Messages['ok'], options: Options) => void;
+  hash: (message: Messages['hash'], options: Options) => void;
+  invalid: (message: Messages['invalid'], options: Options) => void;
+  problems: (message: Messages['problems'], options: Options) => void;
+  progress: (message: Messages['progress'], options: Options) => void;
+}
+/**
+ * @function on
+ * @description Add an event listener callback.
+ * @param event Event name.
+ * @param callback Event listener callback.
+ */
+export declare function on<E extends keyof Events>(event: E, callback: Events[E]): void;
+/**
+ * @function off
+ * @description Remove an event listener callback.
+ * @param event Event name.
+ * @param callback Event listener callback.
+ */
+export declare function off<E extends keyof Events>(event: E, callback?: Events[E]): void;
+export declare function emit<E extends keyof Events>(event: E, message: Messages[E], options: Options): void;
+export {};

package/types/client/hot.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @module hot
+ */
+/**
+ * @function isUpdateAvailable
+ * @description Is there a newer version of this code available.
+ */
+export declare function isUpdateAvailable(): boolean;
+/**
+ * @function setHash
+ * @description Set webpack hash.
+ * @param value - The new hash value.
+ */
+export declare function setHash(value: string): void;
+/**
+ * @function setStatus
+ * @description Set hot status.
+ * @param value The new status of the hot update.
+ */
+export declare function setStatus(value: HotUpdateStatus): void;
+/**
+ * @function applyUpdate
+ * @description Apply update.
+ * @param hmr Whether to enable HMR.
+ * @param fallback Fallback function when HMR fail.
+ */
+export declare function applyUpdate(hmr: boolean, fallback: (error?: Error) => void): void;

package/types/client/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @module index
+ */
+export { off, on } from './events';

package/types/client/main.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @module main
+ */
+export {};

package/types/client/message.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @module message
+ */
+import { StatsError } from 'webpack';
+export interface Invalid {
+  action: 'invalid';
+  payload: {
+    path: string;
+    builtAt: number;
+  };
+}
+export interface Progress {
+  action: 'progress';
+  payload: {
+    value: number;
+    status: string;
+    message: string;
+  };
+}
+export interface Hash {
+  action: 'hash';
+  payload: {
+    hash: string;
+  };
+}
+export interface Problems {
+  action: 'problems';
+  payload: {
+    builtAt: number;
+    errors: StatsError[];
+    warnings: StatsError[];
+  };
+}
+export interface OK {
+  action: 'ok';
+  payload: {
+    builtAt: number;
+  };
+}

package/types/client/ui/overlay.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @module overlay
+ * @see https://github.com/shellscape/webpack-plugin-serve
+ */
+import { StatsError } from 'webpack';
+export default class Overlay {
+  private hidden;
+  private readonly name;
+  private readonly close;
+  private readonly aside;
+  private readonly errorsList;
+  private readonly errorsTitle;
+  private readonly warningsList;
+  private readonly warningsTitle;
+  constructor(name: string);
+  setProblems(type: 'errors' | 'warnings', problems: StatsError[]): void;
+  show(): void;
+  hide(): void;
+}

package/types/client/ui/progress.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @module progress
+ * @see https://github.com/shellscape/webpack-plugin-serve
+ * @see https://www.zhangxinxu.com/wordpress/2015/07/svg-circle-loading
+ */
+export default class Progress {
+  private timer?;
+  private hidden;
+  private readonly svg;
+  private readonly track;
+  constructor();
+  update(value: number): void;
+  show(): void;
+  hide(): void;
+}

package/types/client/ui/utils/ansi/enum.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @module enum
+ */
+export declare const enum TokenType {
+  EOS = 0,
+  ESC = 1,
+  OSC = 2,
+  SGR = 3,
+  TEXT = 4,
+  INCESC = 5,
+  UNKNOWN = 6
+}

package/types/client/ui/utils/ansi/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @module index
+ */
+import { AnsiBlock, AnsiColor, AnsiStyle, Theme } from './interface';
+export type { AnsiBlock, AnsiStyle };
+export default class Ansi {
+  protected buffer: string;
+  protected style: AnsiStyle;
+  protected colors256: AnsiColor[];
+  protected colors16: AnsiColor[][];
+  constructor(theme?: Theme);
+  private read;
+  private reset;
+  private process;
+  private block;
+  write(text: string, callback: (block: AnsiBlock) => void): void;
+  flush(callback: (block: AnsiBlock) => void): void;
+}

package/types/client/ui/utils/ansi/interface.d.ts

@@ -0,0 +1,68 @@
+/**
+ * @module interface
+ */
+import { TokenType } from './enum';
+export type AnsiColor = [R: number, G: number, B: number];
+export interface AnsiStyle {
+  dim: boolean;
+  bold: boolean;
+  blink: boolean;
+  hidden: boolean;
+  italic: boolean;
+  inverse: boolean;
+  overline: boolean;
+  underline: boolean;
+  strikethrough: boolean;
+  color: AnsiColor | null;
+  background: AnsiColor | null;
+}
+export interface AnsiBlock {
+  url?: string;
+  value: string;
+  style: AnsiStyle;
+}
+export interface EOSToken {
+  type: TokenType.EOS;
+}
+export interface ESCToken {
+  type: TokenType.ESC;
+}
+export interface OSCToken {
+  url: string;
+  value: string;
+  type: TokenType.OSC;
+}
+export interface SGRToken {
+  signal: string;
+  type: TokenType.SGR;
+}
+export interface TEXTToken {
+  value: string;
+  type: TokenType.TEXT;
+}
+export interface INCESCToken {
+  type: TokenType.INCESC;
+}
+export interface UNKNOWNToken {
+  type: TokenType.UNKNOWN;
+}
+export type BlockToken = OSCToken | TEXTToken;
+export type AnsiToken = EOSToken | ESCToken | OSCToken | SGRToken | TEXTToken | INCESCToken | UNKNOWNToken;
+export interface Theme {
+  red?: AnsiColor;
+  blue?: AnsiColor;
+  cyan?: AnsiColor;
+  black?: AnsiColor;
+  green?: AnsiColor;
+  white?: AnsiColor;
+  yellow?: AnsiColor;
+  magenta?: AnsiColor;
+  brightRed?: AnsiColor;
+  brightBlue?: AnsiColor;
+  brightCyan?: AnsiColor;
+  brightBlack?: AnsiColor;
+  brightGreen?: AnsiColor;
+  brightWhite?: AnsiColor;
+  brightYellow?: AnsiColor;
+  brightMagenta?: AnsiColor;
+}

package/types/client/ui/utils/ansi/regx.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @module regx
+ */
+export declare const OSC_ST_RE: RegExp;
+export declare const CSI_RE: RegExp;
+export declare const OSC_RE: RegExp;

package/types/client/ui/utils/ansi/utils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @module utils
+ */
+import { AnsiColor } from './interface';
+export declare function toUint8(uint8: number): number;
+export declare function getThemeColor(defaultColor: AnsiColor, color?: AnsiColor): AnsiColor;

package/types/client/ui/utils/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @module utils
+ */
+import { AnsiBlock } from './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;

package/types/server/dev.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @module dev
+ */
+/// <reference types="node" />
+import { AdditionalMethods, ExtendedServerResponse, IncomingMessage, Options as DevOptions } from 'webpack-dev-middleware';
+import { Middleware } from 'koa';
+import { Compiler } from 'webpack';
+import { ServerResponse } from 'http';
+export interface OutgoingMessage extends ServerResponse, ExtendedServerResponse {
+  send(body: any): void;
+  get(field: string): string;
+  status(statusCode: number): void;
+  set(field: string, value: string): void;
+}
+export type Options = DevOptions<IncomingMessage, OutgoingMessage>;
+export type Extensions = AdditionalMethods<IncomingMessage, OutgoingMessage>;
+export default function dev(compiler: Compiler, options: Options): Middleware & Extensions;

package/types/server/hot.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @module hot
+ */
+import { Middleware } from 'koa';
+import WebSocket from 'ws';
+import { Compiler } from 'webpack';
+export interface Options {
+  hmr?: boolean;
+  path?: string;
+  progress?: boolean;
+}
+export type Extensions = {
+  clients(): Set<WebSocket>;
+  broadcast<T>(clients: Set<WebSocket> | WebSocket[], action: string, payload: T): void;
+};
+export default function hot(compiler: Compiler, options?: Options): Middleware & Extensions;

package/types/server/index.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @module index
+ */
+import { Middleware } from 'koa';
+import { Compiler } from 'webpack';
+import { Extensions as DevExtensions, Options as DevOptions } from './dev';
+import { Extensions as HotExtensions, Options as HotOptions } from './hot';
+export type Options = DevOptions & {
+  hot?: false | HotOptions;
+};
+export type BaseMiddleware = Middleware & DevExtensions;
+export type ExtendMiddleware = BaseMiddleware & HotExtensions;
+/**
+ * @function server
+ * @description Create koa dev server middleware.
+ * @param compiler The webpack compiler instance.
+ */
+export default function server(compiler: Compiler): ExtendMiddleware;
+/**
+ * @function server
+ * @description Create koa dev server middleware.
+ * @param compiler The webpack compiler instance.
+ * @param options Options.
+ */
+export default function server(
+  compiler: Compiler,
+  options: Options & {
+    hot: false;
+  }
+): BaseMiddleware;
+/**
+ * @function server
+ * @description Create koa dev server middleware.
+ * @param compiler The webpack compiler instance.
+ * @param options Options.
+ */
+export default function server(
+  compiler: Compiler,
+  options: Options & {
+    hot?: HotOptions;
+  }
+): ExtendMiddleware;