webpack-dev-service 0.15.16 → 0.16.0

package/README.md

@@ -19,10 +19,10 @@
  */
 
 import Koa from 'koa';
-import memfs from 'memfs';
 import path from 'node:path';
 import webpack from 'webpack';
 import compress from 'koa-compress';
+import { Volume, createFsFromVolume } from 'memfs';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import { server as dev } from 'webpack-dev-service';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
@@ -45,10 +45,9 @@ const html = {
 };
 
 function createMemfs() {
-  const volume = new memfs.Volume();
-  const fs = memfs.createFsFromVolume(volume);
+  const volume = new Volume();
 
-  return fs;
+  return createFsFromVolume(volume);
 }
 
 function httpError(error) {
@@ -67,33 +66,7 @@ const compiler = webpack({
     path: path.resolve('wwwroot/public'),
     assetModuleFilename: `[path][name][ext]`
   },
-  devtool: 'eval-cheap-module-source-map',
-  resolve: {
-    fallback: { url: false },
-    extensions: ['.ts', '.tsx', '.js', '.jsx']
-  },
-  watchOptions: {
-    aggregateTimeout: 256
-  },
-  stats: {
-    colors: true,
-    chunks: false,
-    children: false,
-    entrypoints: false,
-    runtimeModules: false,
-    dependentModules: false
-  },
-  plugins: [
-    new HtmlWebpackPlugin(html),
-    new MiniCssExtractPlugin({
-      ignoreOrder: true,
-      filename: 'css/[name].css',
-      chunkFilename: 'css/[name].css'
-    }),
-    new webpack.ProgressPlugin(progress)
-  ],
   module: {
-    strictExportPresence: true,
     rules: [
       {
         oneOf: [
@@ -136,7 +109,7 @@ const compiler = webpack({
                   esModule: true,
                   modules: {
                     auto: true,
-                    namedExport: false,
+                    namedExport: true,
                     localIdentName: '[local]-[hash:8]',
                     exportLocalsConvention: 'camel-case-only'
                   }
@@ -152,13 +125,41 @@ const compiler = webpack({
         ]
       }
     ]
-  }
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx']
+  },
+  plugins: [
+    new HtmlWebpackPlugin(html),
+    new MiniCssExtractPlugin({
+      ignoreOrder: true,
+      filename: 'css/[name].css',
+      chunkFilename: 'css/[name].css'
+    }),
+    new webpack.ProgressPlugin(progress)
+  ],
+  watchOptions: {
+    aggregateTimeout: 256
+  },
+  stats: {
+    all: false,
+    assets: true,
+    colors: true,
+    errors: true,
+    timings: true,
+    version: true,
+    warnings: true,
+    errorsCount: true,
+    warningsCount: true,
+    groupAssetsByPath: true
+  },
+  devtool: 'eval-cheap-module-source-map'
 });
 
 const port = 8000;
 const app = new Koa();
 const fs = createMemfs();
-const server = dev(compiler, {
+const server = await dev(compiler, {
   fs,
   headers: {
     'Cache-Control': 'no-cache',
@@ -184,9 +185,7 @@ app.on('error', error => {
 });
 
 app.listen(port, () => {
-  server.ready(() => {
-    server.logger.info(`server run at: \u001B[36mhttp://127.0.0.1:${port}\u001B[0m`);
-  });
+  server.logger.info(`server run at: \x1b[36mhttp://127.0.0.1:${port}\x1b[0m`);
 });
 ```
 

package/cjs/client/HotUpdate.cjs

@@ -0,0 +1,78 @@
+/**
+ * @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
+ */
+
+'use strict';
+
+/**
+ * @module HotUpdate
+ */
+class HotUpdate {
+  #hmr;
+  #fallback;
+  #pending = false;
+  #hash = __webpack_hash__;
+  #hot = module.hot;
+  /**
+   * @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;
+      }
+    }
+  }
+}
+
+exports.HotUpdate = HotUpdate;

package/cjs/client/HotUpdate.d.cts

@@ -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/cjs/client/client.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
@@ -12,31 +12,29 @@
 const events = require('./events.cjs');
 const Overlay = require('./ui/Overlay.cjs');
 const Progress = require('./ui/Progress.cjs');
-const hot = require('./hot.cjs');
+const HotUpdate = require('./HotUpdate.cjs');
 
 /**
  * @module client
  */
 function createClient(options) {
-  let updateTimer;
-  const UPDATE_DELAY = 128;
   const RETRY_INTERVAL = 3000;
   const progress = new Progress.Progress();
   const overlay = new Overlay.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(() => {
-      hot.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.HotUpdate(options.hmr, fallback);
   const onInvalid = () => {
-    clearTimeout(updateTimer);
     if (options.progress) {
       progress.update(0);
       progress.show();
@@ -74,14 +72,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/cjs/client/events.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/client/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

package/cjs/client/main.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/client/ui/Overlay.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
@@ -185,8 +185,8 @@ class Overlay {
   #warningsTitle;
   constructor(name) {
     const root = utils.getRootElement(OVERLAY);
-    utils.injectCSS(CSS, root);
-    const [dialog] = utils.appendHTML(HTML, root);
+    utils.insertCSSString(CSS, root);
+    const [dialog] = utils.appendDOMString('text/html', HTML, root);
     this.#dialog = dialog;
     this.#name = dialog.querySelector(`.${OVERLAY}-name`);
     this.#close = dialog.querySelector(`.${OVERLAY}-close`);

package/cjs/client/ui/Progress.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
@@ -52,8 +52,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="${webpackLogo}" x="16" y="16" width="64" height="64"/>
@@ -66,8 +66,8 @@ class Progress {
   #track;
   constructor() {
     const root = utils.getRootElement(PROGRESS);
-    utils.injectCSS(CSS, root);
-    [this.#svg] = utils.appendHTML(HTML, root);
+    utils.insertCSSString(CSS, root);
+    [this.#svg] = utils.appendDOMString('image/svg+xml', SVG, root);
     this.#track = this.#svg.querySelector(`.${PROGRESS}-track`);
   }
   update(percentage) {

package/cjs/client/ui/images/webpack-logo.svg.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/client/ui/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
@@ -99,32 +99,33 @@ 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;
 }
 
 exports.ansiToHTML = ansiToHTML;
-exports.appendHTML = appendHTML;
+exports.appendDOMString = appendDOMString;
 exports.blockToHTML = blockToHTML;
 exports.escapeHTML = escapeHTML;
 exports.getRootElement = getRootElement;
-exports.injectCSS = injectCSS;
+exports.insertCSSString = insertCSSString;

package/cjs/client/ui/utils.d.cts

@@ -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/cjs/server/compose.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/ReadStream.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/Service.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/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
@@ -9,7 +9,6 @@
 
 'use strict';
 
-const ready = require('./utils/ready.cjs');
 const fs = require('./utils/fs.cjs');
 const middleware = require('./middleware.cjs');
 const setupHooks = require('./utils/setupHooks.cjs');
@@ -38,18 +37,12 @@ function setup(compiler, options) {
   setupWatching.setupWatching(context);
   return context;
 }
-function dev(compiler, options) {
+async function dev(compiler, options) {
   const context = setup(compiler, options);
-  return Object.assign(middleware.middleware(context), {
-    get state() {
-      return !!context.stats;
-    },
+  return Object.assign(await middleware.middleware(context), {
     get logger() {
       return context.logger;
     },
-    ready(callback) {
-      ready.ready(context, callback);
-    },
     close(callback) {
       context.watching.close(callback);
     },

package/cjs/server/dev/index.d.cts

@@ -5,4 +5,4 @@ import { Middleware } from 'koa';
 import { UnionCompiler } from '../interface.cjs';
 import { Expose, Options } from './interface.cjs';
 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/cjs/server/dev/interface.d.cts

@@ -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/cjs/server/dev/middleware.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
@@ -18,11 +18,6 @@ const paths = require('./utils/paths.cjs');
  * @module middleware
  */
 function getFileServices(context, stats) {
-  const cached = context.services;
-  // Cache hit.
-  if (cached) {
-    return cached;
-  }
   const { options } = context;
   const paths$1 = paths.getPaths(stats);
   const services = [];
@@ -30,8 +25,6 @@ function getFileServices(context, stats) {
   for (const [outputPath, publicPath] of paths$1) {
     services.push([publicPath, new Service.Service(outputPath, options)]);
   }
-  // Cache services.
-  context.services = services;
   // Return services.
   return services;
 }
@@ -49,24 +42,24 @@ function getFileServicesAsync(context) {
     }
   });
 }
-function middleware(context) {
+async function middleware(context) {
+  // Get the file services.
+  const services = await getFileServicesAsync(context);
   // Middleware.
-  return async (ctx, next) => {
-    const { request } = ctx;
+  return async (context, next) => {
+    const { request } = context;
     const pathname = http.decodeURI(request.path);
     // Pathname decode failed or includes null byte(s).
     if (pathname === -1 || pathname.includes('\0')) {
-      return ctx.throw(400);
+      return context.throw(400);
     }
     // Get request method.
     const { method } = request;
     // Only support GET and HEAD (405).
     if (method === 'GET' || method === 'HEAD') {
-      // Get the file services.
-      const services = await getFileServicesAsync(context);
       // Try to respond.
       for (const [publicPath, service] of services) {
-        if (await service.respond(pathname, ctx, publicPath)) {
+        if (await service.respond(pathname, context, publicPath)) {
           return;
         }
       }

package/cjs/server/dev/middleware.d.cts

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

package/cjs/server/dev/utils/fs.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/hash.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/http.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/path.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/paths.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