webpack-dev-service 0.15.16 → 0.16.0

package/cjs/server/dev/utils/ready.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.15.16
+ * @version 0.16.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/cjs/server/dev/utils/setupHooks.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.15.16
+ * @version 0.16.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
@@ -87,11 +87,14 @@ function setupHooks(context) {
         onCompilationDone(stats, statsOptions);
         // Callbacks.
         const { callbacks } = context;
-        // Clear callbacks.
-        context.callbacks = [];
-        // Call callbacks.
-        for (const callback of callbacks) {
-          callback(stats);
+        // Call callbacks if there are any.
+        if (callbacks.length > 0) {
+          // Clear callbacks.
+          context.callbacks = [];
+          // Call callbacks.
+          for (const callback of callbacks) {
+            callback(stats);
+          }
         }
         // Log compilation finished.
         context.logger.log('compilation finished');

package/cjs/server/dev/utils/setupOutputFileSystem.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.15.16
+ * @version 0.16.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/cjs/server/dev/utils/setupWatching.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.15.16
+ * @version 0.16.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/cjs/server/dev/utils/setupWriteToDisk.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.15.16
+ * @version 0.16.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/cjs/server/hot/Socket.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.15.16
+ * @version 0.16.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
@@ -53,11 +53,18 @@ class Socket {
         clients: new Set()
       };
       contexts.set(uuid$1, context);
+      this.#setupOutput(compiler, uuid$1);
       this.#setupHooks(compiler, context);
       this.#setupPlugins(compiler, context);
     }
     this.#setupWss(contexts);
   }
+  #setupOutput(compiler, uuid) {
+    const { output } = compiler.options;
+    // Override hot update filename.
+    output.hotUpdateChunkFilename = `[id].${uuid}.hot-update.js`;
+    output.hotUpdateMainFilename = `[runtime].${uuid}.hot-update.json`;
+  }
   #setupHooks(compiler, context) {
     const { hooks } = compiler;
     const statsOptions = utils.getStatsOptions(compiler);

package/cjs/server/hot/index.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.15.16
+ * @version 0.16.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
@@ -17,8 +17,8 @@ const Socket = require('./Socket.cjs');
 function hot(compiler, options) {
   const socket = new Socket.Socket(compiler, options);
   // Middleware.
-  return async (ctx, next) => {
-    if (!socket.upgrade(ctx)) {
+  return async (context, next) => {
+    if (!socket.upgrade(context)) {
       await next();
     }
   };

package/cjs/server/hot/utils.cjs

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

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.15.16
+ * @version 0.16.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
@@ -25,7 +25,7 @@ const index = require('./dev/index.cjs');
  * @param compiler The rspack compiler instance.
  * @param options Options.
  */
-function server(compiler, options = {}) {
+async function server(compiler, options = {}) {
   schemaUtils.validate(schema.schema, options, {
     name: utils.PLUGIN_NAME,
     baseDataPath: 'options'
@@ -37,9 +37,8 @@ function server(compiler, options = {}) {
   // All plugins must be initialized before watching.
   // Because dev will start watching, so call hot before dev.
   const hotMiddleware = index$1.hot(compiler, hotOptions);
-  const devMiddleware = index.dev(compiler, options);
-  const middleware = compose.compose(devMiddleware, hotMiddleware);
-  return Object.assign(middleware, devMiddleware, hotMiddleware);
+  const devMiddleware = await index.dev(compiler, options);
+  return Object.assign(compose.compose(devMiddleware, hotMiddleware), devMiddleware);
 }
 
 exports.server = server;

package/cjs/server/index.d.cts

@@ -14,4 +14,4 @@ export type Options = DevOptions & {
  * @param compiler The rspack compiler instance.
  * @param options Options.
  */
-export declare function server(compiler: UnionCompiler, options?: Options): Middleware & Expose;
+export declare function server(compiler: UnionCompiler, options?: Options): Promise<Middleware & Expose>;

package/cjs/server/schema.cjs

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

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.15.16
+ * @version 0.16.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/esm/client/HotUpdate.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @module HotUpdate
+ */
+export interface Fallback {
+  (error?: Error): Promise<void> | void;
+}
+export declare class HotUpdate {
+  #private;
+  /**
+   * @constructor
+   * @param hmr Whether to enable HMR hot update.
+   * @param fallback Fallback handler for update failures.
+   */
+  constructor(hmr: boolean | undefined, fallback: Fallback);
+  /**
+   * @method updateHash
+   * @description Update hash value.
+   * @param hash New hash value.
+   */
+  updateHash(hash: string): void;
+  /**
+   * @method performUpdate
+   * @description Execute update strategy.
+   */
+  performUpdate(): Promise<void>;
+}

package/esm/client/HotUpdate.js

@@ -0,0 +1,76 @@
+/**
+ * @package webpack-dev-service
+ * @license MIT
+ * @version 0.16.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 HotUpdate
+ */
+class HotUpdate {
+  #hmr;
+  #fallback;
+  #pending = false;
+  #hash = __webpack_hash__;
+  #hot = import.meta.webpackHot;
+  /**
+   * @constructor
+   * @param hmr Whether to enable HMR hot update.
+   * @param fallback Fallback handler for update failures.
+   */
+  constructor(hmr = true, fallback) {
+    this.#hmr = hmr;
+    this.#fallback = fallback;
+    // Listen to status changes
+    this.#hot?.addStatusHandler(async status => {
+      if (this.#pending && status === 'idle') {
+        this.#pending = false;
+        await this.performUpdate();
+      }
+    });
+  }
+  /**
+   * @method updateHash
+   * @description Update hash value.
+   * @param hash New hash value.
+   */
+  updateHash(hash) {
+    this.#hash = hash;
+  }
+  /**
+   * @method #isUpdateAvailable
+   * @description Check if new updates are available.
+   */
+  #isUpdateAvailable() {
+    return this.#hash !== __webpack_hash__;
+  }
+  /**
+   * @method performUpdate
+   * @description Execute update strategy.
+   */
+  async performUpdate() {
+    if (this.#isUpdateAvailable()) {
+      if (!this.#hmr || !this.#hot) {
+        await this.#fallback();
+      } else if (this.#hot.status() === 'idle') {
+        try {
+          const outdated = await this.#hot.check(true);
+          if (this.#isUpdateAvailable()) {
+            if (outdated == null || outdated.length <= 0) {
+              await this.#fallback();
+            }
+          }
+        } catch (error) {
+          await this.#fallback(error);
+        }
+      } else {
+        this.#pending = true;
+      }
+    }
+  }
+}
+
+export { HotUpdate };

package/esm/client/client.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.15.16
+ * @version 0.16.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
@@ -10,31 +10,29 @@
 import { emit } from './events.js';
 import { Overlay } from './ui/Overlay.js';
 import { Progress } from './ui/Progress.js';
-import { applyUpdate, updateHash } from './hot.js';
+import { HotUpdate } from './HotUpdate.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);
+    return new Promise(resolve => {
+      queueMicrotask(() => {
+        if (options.reload) {
+          self.location.reload();
+        } else {
+          console.warn('[HMR] Hot update failed. Please reload the page manually.');
+        }
+        resolve();
+      });
+    });
   };
+  const hot = new HotUpdate(options.hmr, fallback);
   const onInvalid = () => {
-    clearTimeout(updateTimer);
     if (options.progress) {
       progress.update(0);
       progress.show();
@@ -46,7 +44,7 @@ function createClient(options) {
     }
   };
   const onHash = ({ hash }) => {
-    updateHash(hash);
+    hot.updateHash(hash);
   };
   const setIssues = (type, issues) => {
     if (options.overlay) {
@@ -72,14 +70,14 @@ function createClient(options) {
       overlay.show();
     }
     if (errors.length <= 0) {
-      applyUpdateAsync();
+      hot.performUpdate();
     }
   };
   const onOk = () => {
     progress.update(1);
     progress.hide();
     overlay.hide();
-    applyUpdateAsync();
+    hot.performUpdate();
   };
   const parseMessage = message => {
     try {

package/esm/client/events.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.15.16
+ * @version 0.16.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/esm/client/index.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.15.16
+ * @version 0.16.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/esm/client/main.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.15.16
+ * @version 0.16.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/esm/client/ui/Overlay.js

@@ -1,13 +1,13 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.15.16
+ * @version 0.16.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 { getRootElement, injectCSS, appendHTML, ansiToHTML } from './utils.js';
+import { getRootElement, insertCSSString, appendDOMString, ansiToHTML } from './utils.js';
 
 /**
  * @module overlay
@@ -183,8 +183,8 @@ class Overlay {
   #warningsTitle;
   constructor(name) {
     const root = getRootElement(OVERLAY);
-    injectCSS(CSS, root);
-    const [dialog] = appendHTML(HTML, root);
+    insertCSSString(CSS, root);
+    const [dialog] = appendDOMString('text/html', HTML, root);
     this.#dialog = dialog;
     this.#name = dialog.querySelector(`.${OVERLAY}-name`);
     this.#close = dialog.querySelector(`.${OVERLAY}-close`);

package/esm/client/ui/Progress.js

@@ -1,14 +1,14 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.15.16
+ * @version 0.16.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 logo from './images/webpack-logo.svg.js';
-import { getRootElement, injectCSS, appendHTML } from './utils.js';
+import { getRootElement, insertCSSString, appendDOMString } from './utils.js';
 
 /**
  * @module progress
@@ -50,8 +50,8 @@ const CSS = `
   transform: matrix(0, -1, 1, 0, 0, 96) translateZ(0);
 }
 `;
-const HTML = `
-<svg class="${PROGRESS}" x="0" y="0" viewBox="0 0 96 96">
+const SVG = `
+<svg xmlns="http://www.w3.org/2000/svg" class="${PROGRESS}" x="0" y="0" viewBox="0 0 96 96">
   <circle fill="#101619" cx="50%" cy="50%" r="44" />
   <circle class="${PROGRESS}-track" cx="50%" cy="50%" r="44" />
   <image href="${logo}" x="16" y="16" width="64" height="64"/>
@@ -64,8 +64,8 @@ class Progress {
   #track;
   constructor() {
     const root = getRootElement(PROGRESS);
-    injectCSS(CSS, root);
-    [this.#svg] = appendHTML(HTML, root);
+    insertCSSString(CSS, root);
+    [this.#svg] = appendDOMString('image/svg+xml', SVG, root);
     this.#track = this.#svg.querySelector(`.${PROGRESS}-track`);
   }
   update(percentage) {

package/esm/client/ui/images/webpack-logo.svg.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.15.16
+ * @version 0.16.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/esm/client/ui/utils.d.ts

@@ -7,9 +7,13 @@ export declare function blockToHTML({ style, value, url }: AnsiBlock): string;
 export declare function ansiToHTML(text: string): string;
 export type RootElement = HTMLElement | ShadowRoot;
 export declare function getRootElement(tagName: string): ShadowRoot;
-export declare function injectCSS(
+export declare function insertCSSString(
   css: string,
   root?: HTMLElement | ShadowRoot,
   styleElement?: HTMLStyleElement
 ): HTMLStyleElement;
-export declare function appendHTML(html: string, root?: RootElement): ChildNode[];
+export declare function appendDOMString<T extends DOMParserSupportedType>(
+  type: T,
+  string: string,
+  root?: RootElement
+): (T extends 'image/svg+xml' ? SVGElement : HTMLElement)[];

package/esm/client/ui/utils.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.15.16
+ * @version 0.16.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
@@ -97,27 +97,28 @@ function ansiToHTML(text) {
 }
 function getRootElement(tagName) {
   const stage = document.createElement(tagName);
-  const root = stage.attachShadow({ mode: 'closed' });
+  const shadowRoot = stage.attachShadow({ mode: 'closed' });
   document.body.appendChild(stage);
-  return root;
+  return shadowRoot;
 }
-function injectCSS(css, root = document.body, styleElement = document.createElement('style')) {
-  styleElement.appendChild(document.createTextNode(css.trim()));
+function insertCSSString(css, root = document.body, styleElement = document.createElement('style')) {
+  styleElement.appendChild(document.createTextNode(css));
   if (!root.contains(styleElement)) {
     root.appendChild(styleElement);
   }
   return styleElement;
 }
-function appendHTML(html, root = document.body) {
+function appendDOMString(type, string, root = document.body) {
   const nodes = [];
   const parser = new DOMParser();
   const fragment = document.createDocumentFragment();
-  const { body } = parser.parseFromString(html.trim(), 'text/html');
-  while (body.firstChild) {
-    nodes.push(fragment.appendChild(body.firstChild));
+  const { body, childNodes } = parser.parseFromString(string, type);
+  for (const node of body ? body.childNodes : childNodes) {
+    nodes.push(node);
+    fragment.appendChild(node);
   }
   root.appendChild(fragment);
   return nodes;
 }
 
-export { ansiToHTML, appendHTML, blockToHTML, escapeHTML, getRootElement, injectCSS };
+export { ansiToHTML, appendDOMString, blockToHTML, escapeHTML, getRootElement, insertCSSString };

package/esm/server/compose.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.15.16
+ * @version 0.16.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/esm/server/dev/ReadStream.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.15.16
+ * @version 0.16.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/esm/server/dev/Service.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.15.16
+ * @version 0.16.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/esm/server/dev/index.d.ts

@@ -5,4 +5,4 @@ import { Middleware } from 'koa';
 import { UnionCompiler } from '../interface.js';
 import { Expose, Options } from './interface.js';
 export { Expose, Options };
-export declare function dev(compiler: UnionCompiler, options: Options): Middleware & Expose;
+export declare function dev(compiler: UnionCompiler, options: Options): Promise<Middleware & Expose>;

package/esm/server/dev/index.js

@@ -1,13 +1,12 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.15.16
+ * @version 0.16.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 { ready } from './utils/ready.js';
 import { createMemfs } from './utils/fs.js';
 import { middleware } from './middleware.js';
 import { setupHooks } from './utils/setupHooks.js';
@@ -36,18 +35,12 @@ function setup(compiler, options) {
   setupWatching(context);
   return context;
 }
-function dev(compiler, options) {
+async function dev(compiler, options) {
   const context = setup(compiler, options);
-  return Object.assign(middleware(context), {
-    get state() {
-      return !!context.stats;
-    },
+  return Object.assign(await middleware(context), {
     get logger() {
       return context.logger;
     },
-    ready(callback) {
-      ready(context, callback);
-    },
     close(callback) {
       context.watching.close(callback);
     },

package/esm/server/dev/interface.d.ts

@@ -13,8 +13,6 @@ export interface ErrorCallback {
 }
 export interface Expose {
   readonly logger: Logger;
-  readonly state: boolean;
-  readonly ready: (callback: Callback) => void;
   readonly close: (callback: ErrorCallback) => void;
   readonly invalidate: (callback: ErrorCallback) => void;
 }
@@ -29,7 +27,6 @@ export interface Context {
   callbacks: Callback[];
   compiler: UnionCompiler;
   watching: UnionWatching;
-  services?: FileService[];
   stats: UnionStats | null;
   options: Options & {
     fs: FileSystem;

package/esm/server/dev/middleware.d.ts

@@ -3,4 +3,4 @@
  */
 import { Middleware } from 'koa';
 import { Context } from './interface.js';
-export declare function middleware(context: Context): Middleware;
+export declare function middleware(context: Context): Promise<Middleware>;