webpack-dev-service 0.8.0 → 0.9.0

package/server/esm/hot/Socket.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.8.0
+ * @version 0.9.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,143 +9,120 @@
 
 import WebSocket, { WebSocketServer } from 'ws';
 import webpack from 'webpack';
+import { PLUGIN_NAME, getCompilers } from '../utils.js';
+import { getOptions, getStatsOptions, getTimestamp, isUpgradable, hasIssues, WEBSOCKET_RE } from './utils.js';
 
 /**
  * @module Socket
  */
-const WEBSOCKET_RE = /^websocket$/i;
-const { toString } = Object.prototype;
-function isObject(value) {
-  return 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 Socket {
   constructor(compiler, options) {
-    this.name = 'webpack-hot-middleware';
+    this.stats = null;
     this.compiler = compiler;
-    this.options = resolveOptions(options);
-    this.logger = compiler.getInfrastructureLogger(this.name);
-    this.server = new WebSocketServer({ path: this.options.path, noServer: true });
+    this.options = getOptions(options);
+    this.server = new WebSocketServer({
+      noServer: true,
+      path: this.options.path
+    });
+    this.logger = compiler.getInfrastructureLogger(PLUGIN_NAME);
     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);
       }
+      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 = resolveStatsOptions(compiler);
-    hooks.done.tapAsync(this.name, (stats, next) => {
-      next();
-      this.stats = stats.toJson(statsOptions);
-      this.broadcastStats(this.clients(), this.stats);
+    const statsOptions = getStatsOptions(compiler);
+    hooks.done.tap(PLUGIN_NAME, stats => {
+      // Get json stats.
+      const jsonStats = stats.toJson(statsOptions);
+      // Hack builtAt.
+      if (jsonStats.builtAt == null) {
+        jsonStats.builtAt = 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(this.name, (path, builtAt) => {
-      this.broadcast(this.clients(), 'invalid', { path, builtAt });
+    hooks.invalid.tap(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 = getCompilers(compiler);
     const plugins = [
-      new webpack.NoEmitOnErrorsPlugin(),
-      new webpack.DefinePlugin({
-        __WDS_HOT_OPTIONS__: JSON.stringify({
-          ...options,
-          name: compiler.name
-        })
-      })
+      () => {
+        return new webpack.NoEmitOnErrorsPlugin();
+      },
+      () => {
+        return new webpack.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.EntryPlugin(context, `webpack-dev-service/client?${params}`, {
+          // Don't create runtime.
+          runtime: false
+        });
+      }
     ];
-    if (options.hmr) {
-      plugins.push(new webpack.HotModuleReplacementPlugin());
+    for (const compiler of compilers) {
+      for (const plugin of plugins) {
+        plugin(compiler).apply(compiler);
+      }
     }
     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 });
+      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;
           }
-        })
-      );
-    }
-    for (const plugin of plugins) {
-      plugin.apply(compiler);
+          this.broadcast(this.clients(), 'progress', { status, message, value });
+        }
+      }).apply(compiler);
     }
   }
   clients() {
@@ -174,12 +151,12 @@ class Socket {
   }
   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 });
+      const { hash, errors, warnings, builtAt: timestamp } = stats;
+      this.broadcast(clients, 'hash', { hash, timestamp });
+      if (hasIssues(errors) || hasIssues(warnings)) {
+        this.broadcast(clients, 'issues', { errors, warnings, timestamp });
       } else {
-        this.broadcast(clients, 'ok', { builtAt });
+        this.broadcast(clients, 'ok', { timestamp });
       }
     }
   }

package/server/esm/hot/index.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.8.0
+ * @version 0.9.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
@@ -12,23 +12,21 @@ import { Socket } from './Socket.js';
 /**
  * @module index
  */
-function hot(compiler, options = {}) {
+function hot(compiler, options) {
   const socket = new Socket(compiler, options);
-  return Object.assign(
-    async (ctx, next) => {
-      if (!socket.upgrade(ctx)) {
-        await next();
-      }
+  const middleware = async (ctx, next) => {
+    if (!socket.upgrade(ctx)) {
+      await next();
+    }
+  };
+  return Object.assign(middleware, {
+    clients() {
+      return socket.clients();
     },
-    {
-      clients() {
-        return socket.clients();
-      },
-      broadcast(clients, action, payload) {
-        socket.broadcast(clients, action, payload);
-      }
+    broadcast(clients, action, payload) {
+      socket.broadcast(clients, action, payload);
     }
-  );
+  });
 }
 
 export { hot };

package/server/esm/hot/utils.js

@@ -0,0 +1,93 @@
+/**
+ * @package webpack-dev-service
+ * @license MIT
+ * @version 0.9.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 { isMultiCompilerMode, isObject } from '../utils.js';
+
+/**
+ * @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 (!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 (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;
+}
+
+export { WEBSOCKET_RE, getOptions, getStatsOptions, getTimestamp, hasIssues, isUpgradable };

package/server/esm/index.js

@@ -1,25 +1,35 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.8.0
+ * @version 0.9.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 './dev/utils/compose.js';
-import { dev } from './dev/index.js';
+import { schema } from './schema.js';
+import { compose } from './compose.js';
+import { PLUGIN_NAME } from './utils.js';
+import { validate } from 'schema-utils';
 import { hot } from './hot/index.js';
+import { dev } from './dev/index.js';
 
 /**
  * @module index
  */
 function server(compiler, options = {}) {
-  const devMiddleware = dev(compiler, options);
-  if (options.hot === false) {
-    return devMiddleware;
+  validate(schema, options, {
+    name: PLUGIN_NAME,
+    baseDataPath: 'options'
+  });
+  const { hot: hotOptions } = options;
+  if (hotOptions === false) {
+    return dev(compiler, options);
   }
-  const hotMiddleware = hot(compiler, options.hot);
+  // All plugins must be initialized before watching.
+  // Because dev will start watching, so call hot before dev.
+  const hotMiddleware = hot(compiler, hotOptions);
+  const devMiddleware = dev(compiler, options);
   const middleware = compose(devMiddleware, hotMiddleware);
   return Object.assign(middleware, devMiddleware, hotMiddleware);
 }

package/server/esm/schema.js

@@ -0,0 +1,125 @@
+/**
+ * @package webpack-dev-service
+ * @license MIT
+ * @version 0.9.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
+ */
+
+/**
+ * @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
+};
+
+export { schema };

package/server/esm/utils.js

@@ -0,0 +1,37 @@
+/**
+ * @package webpack-dev-service
+ * @license MIT
+ * @version 0.9.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
+ */
+
+/**
+ * @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;
+}
+
+export { PLUGIN_NAME, getCompilers, isBoolean, isFunction, isMultiCompilerMode, isObject, isString };

package/types/client/client.d.ts

@@ -5,8 +5,8 @@ export interface Options {
   readonly hmr: boolean;
   readonly name: string;
   readonly path: string;
-  readonly live: boolean;
   readonly origin: string;
+  readonly reload: boolean;
   readonly overlay: boolean;
   readonly progress: boolean;
 }

package/types/client/events.d.ts

@@ -6,16 +6,16 @@ import * as Message from './message';
 interface Messages {
   ok: Message.OK['payload'];
   hash: Message.Hash['payload'];
+  issues: Message.Issues['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;
+  ok(message: Messages['ok'], options: Options): void;
+  hash(message: Messages['hash'], options: Options): void;
+  issues(message: Messages['issues'], options: Options): void;
+  invalid(message: Messages['invalid'], options: Options): void;
+  progress(message: Messages['progress'], options: Options): void;
 }
 /**
  * @function on

package/types/client/message.d.ts

@@ -6,7 +6,7 @@ export interface Invalid {
   action: 'invalid';
   payload: {
     path: string;
-    builtAt: number;
+    timestamp: number;
   };
 }
 export interface Progress {
@@ -21,12 +21,13 @@ export interface Hash {
   action: 'hash';
   payload: {
     hash: string;
+    timestamp: number;
   };
 }
-export interface Problems {
-  action: 'problems';
+export interface Issues {
+  action: 'issues';
   payload: {
-    builtAt: number;
+    timestamp: number;
     errors: StatsError[];
     warnings: StatsError[];
   };
@@ -34,6 +35,6 @@ export interface Problems {
 export interface OK {
   action: 'ok';
   payload: {
-    builtAt: number;
+    timestamp: number;
   };
 }

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

@@ -13,7 +13,7 @@ export default class Overlay {
   private readonly warningsList;
   private readonly warningsTitle;
   constructor(name: string);
-  setProblems(type: 'errors' | 'warnings', problems: StatsError[]): void;
+  setIssues(type: 'errors' | 'warnings', issues: StatsError[]): void;
   show(): void;
   hide(): void;
 }