webpack-dev-service 0.8.1 → 0.10.0

package/README.md

@@ -12,7 +12,7 @@
 
 ### Usage
 
-```js
+```ts
 /**
  * @module webpack
  * @description Webpack config
@@ -22,6 +22,7 @@ import Koa from 'koa';
 import path from 'path';
 import memfs from 'memfs';
 import webpack from 'webpack';
+import compress from 'koa-compress';
 import dev from 'webpack-dev-service';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
@@ -39,7 +40,7 @@ const html = {
   filename: entryHTML,
   templateParameters: { lang: 'en' },
   template: path.resolve('index.ejs'),
-  favicon: path.resolve('src/logo.svg'),
+  favicon: path.resolve('src/images/favicon.ico'),
   meta: { 'theme-color': '#4285f4', viewport: 'width=device-width,initial-scale=1.0' }
 };
 
@@ -47,8 +48,6 @@ function createMemfs() {
   const volume = new memfs.Volume();
   const fs = memfs.createFsFromVolume(volume);
 
-  fs.join = path.join.bind(path);
-
   return fs;
 }
 
@@ -60,16 +59,10 @@ const compiler = webpack({
   name: 'react',
   mode: 'development',
   context: path.resolve('src'),
-  entry: [
-    // Entry file
-    path.resolve('src/index.jsx'),
-    // Hot client
-    'webpack-dev-service/client'
-  ],
+  entry: path.resolve('src/index.tsx'),
   output: {
     publicPath: '/public/',
     filename: `js/[name].js`,
-    hashFunction: 'xxhash64',
     path: path.resolve('public'),
     chunkFilename: `js/[name].js`,
     assetModuleFilename: `[path][name][ext]`
@@ -77,7 +70,7 @@ const compiler = webpack({
   devtool: 'eval-cheap-module-source-map',
   resolve: {
     fallback: { url: false },
-    extensions: ['.js', '.jsx']
+    extensions: ['.ts', '.tsx', '.js', '.jsx']
   },
   watchOptions: {
     aggregateTimeout: 256
@@ -90,20 +83,28 @@ const compiler = webpack({
     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: [
           {
-            test: /\.jsx?$/i,
+            test: /\.[jt]sx?$/i,
             exclude: /[\\/]node_modules[\\/]/,
             use: [
               {
                 loader: 'swc-loader',
                 options: {
                   jsc: {
-                    target: 'es2015',
                     externalHelpers: true,
                     parser: {
                       tsx: true,
@@ -113,9 +114,6 @@ const compiler = webpack({
                       react: {
                         runtime: 'automatic'
                       }
-                    },
-                    experimental: {
-                      cacheRoot: path.resolve('node_modules/.cache/swc')
                     }
                   },
                   env: {
@@ -146,40 +144,33 @@ const compiler = webpack({
             ]
           },
           {
-            test: /\.svg$/i,
+            test: /\.(svg|mp4)$/i,
             type: 'asset/resource',
             exclude: /[\\/]node_modules[\\/]/
           }
         ]
       }
     ]
-  },
-  plugins: [
-    new webpack.ProgressPlugin(progress),
-    new HtmlWebpackPlugin(html),
-    new MiniCssExtractPlugin({
-      ignoreOrder: true,
-      filename: 'css/[name].css',
-      chunkFilename: 'css/[name].css'
-    })
-  ]
+  }
 });
 
 const port = 8000;
 const app = new Koa();
 const fs = createMemfs();
 const server = dev(compiler, {
-  outputFileSystem: fs,
+  fs,
   headers: {
-    'Cache-Control': 'no-store',
-    'Access-Control-Allow-Origin': '*',
-    'Access-Control-Allow-Methods': '*',
-    'Access-Control-Allow-Headers': '*',
-    'X-Content-Type-Options': 'nosniff',
-    'Access-Control-Allow-Credentials': 'true'
+    'Cache-Control': 'no-cache',
+    'X-Content-Type-Options': 'nosniff'
   }
 });
 
+app.use(
+  compress({
+    br: false
+  })
+);
+
 app.use(server);
 
 app.use(async ctx => {

package/{server/cjs → cjs/server}/index.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.8.1
+ * @version 0.10.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,19 +9,29 @@
 
 'use strict';
 
-const compose = require('./dev/utils/compose.cjs');
-const index = require('./dev/index.cjs');
+const schema = require('./schema.cjs');
+const compose = require('./compose.cjs');
+const utils = require('./utils.cjs');
+const schemaUtils = require('schema-utils');
 const index$1 = require('./hot/index.cjs');
+const index = require('./dev/index.cjs');
 
 /**
  * @module index
  */
 function server(compiler, options = {}) {
-  const devMiddleware = index.dev(compiler, options);
-  if (options.hot === false) {
-    return devMiddleware;
+  schemaUtils.validate(schema.schema, options, {
+    name: utils.PLUGIN_NAME,
+    baseDataPath: 'options'
+  });
+  const { hot: hotOptions } = options;
+  if (hotOptions === false) {
+    return index.dev(compiler, options);
   }
-  const hotMiddleware = index$1.hot(compiler, options.hot);
+  // 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);
 }

package/package.json

@@ -1,46 +1,33 @@
 {
   "name": "webpack-dev-service",
-  "version": "0.8.1",
+  "version": "0.10.0",
   "description": "A koa 2 middleware for webpack development and hot reloading.",
   "type": "module",
   "sideEffects": [
-    "client/esm/main.js",
-    "client/cjs/main.cjs"
+    "esm/client/main.js",
+    "cjs/client/main.cjs"
   ],
-  "main": "server/cjs/index.cjs",
-  "module": "server/esm/index.js",
+  "main": "cjs/server/index.cjs",
+  "module": "esm/server/index.js",
   "types": "types/server/index.d.ts",
   "exports": {
     ".": {
-      "import": "./server/esm/index.js",
-      "require": "./server/cjs/index.cjs",
+      "import": "./esm/server/index.js",
+      "require": "./cjs/server/index.cjs",
       "types": "./types/server/index.d.ts"
     },
     "./client": {
-      "import": "./client/esm/main.js",
-      "require": "./client/cjs/main.cjs",
-      "types": "./types/client/main.d.ts"
-    },
-    "./client?*": {
-      "import": "./client/esm/main.js?*",
-      "require": "./client/cjs/main.cjs?*",
-      "types": "./types/client/main.d.ts"
-    },
-    "./events": {
-      "import": "./client/esm/index.js",
-      "require": "./client/cjs/index.cjs",
+      "import": "./esm/client/index.js",
+      "require": "./cjs/client/index.cjs",
       "types": "./types/client/index.d.ts"
     }
   },
   "typesVersions": {
     "*": {
-      "client": [
-        "./types/client/main.d.ts"
+      ".": [
+        "./types/server/index.d.ts"
       ],
-      "client?*": [
-        "./types/client/main.d.ts"
-      ],
-      "events": [
+      "client": [
         "./types/client/index.d.ts"
       ]
     }
@@ -48,11 +35,11 @@
   "files": [
     "types",
     "server",
-    "client",
-    "index.d.ts",
-    "client.d.ts",
-    "global.d.ts"
+    "client"
   ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuintun/webpack-dev-service.git"
@@ -93,20 +80,22 @@
     "etag": "^1.8.1",
     "memfs": "^4.8.0",
     "range-parser": "^1.2.1",
+    "schema-utils": "^4.2.0",
     "supports-color": "^9.4.0",
     "tslib": "^2.6.2",
     "ws": "^8.16.0"
   },
   "devDependencies": {
+    "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@swc/core": "^1.4.8",
-    "@swc/helpers": "^0.5.7",
+    "@swc/core": "^1.4.11",
+    "@swc/helpers": "^0.5.8",
     "@types/destroy": "^1.0.3",
     "@types/etag": "^1.8.3",
     "@types/koa-compose": "^3.2.8",
     "@types/node": "^20.11.30",
     "@types/range-parser": "^1.2.7",
-    "@types/react": "^18.2.67",
+    "@types/react": "^18.2.73",
     "@types/react-dom": "^18.2.22",
     "css-loader": "^6.10.0",
     "html-webpack-plugin": "^5.6.0",
@@ -119,13 +108,13 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
-    "rollup": "^4.13.0",
+    "rollup": "^4.13.1",
     "swc-loader": "^0.2.6",
     "tsc-alias": "^1.8.8",
     "typescript": "^5.4.3",
     "webpack": "^5.91.0"
   },
   "peerDependencies": {
-    "webpack": "^5.0.0"
+    "webpack": ">=5.20.0"
   }
 }

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;
 }

package/types/server/dev/Service.d.ts

@@ -0,0 +1,82 @@
+/**
+ * @module Service
+ */
+/// <reference types="node" />
+import { Stats } from 'fs';
+import { Context } from 'koa';
+import { FileSystem } from './utils/fs';
+interface IgnoreFunction {
+  (path: string): boolean;
+}
+interface Headers {
+  [key: string]: string | string[];
+}
+type FileStats = Stats | null | undefined;
+interface HeaderFunction {
+  (path: string, stats: FileStats): Headers | void;
+}
+export interface Options {
+  fs: FileSystem;
+  etag?: boolean;
+  acceptRanges?: boolean;
+  lastModified?: boolean;
+  ignore?: IgnoreFunction;
+  headers?: Headers | HeaderFunction;
+}
+/**
+ * @class Service
+ */
+export declare class Service {
+  private root;
+  private options;
+  /**
+   * @constructor
+   * @description Create file service.
+   * @param root File service root.
+   * @param options File service options.
+   */
+  constructor(root: string, options: Options);
+  /**
+   * @private
+   * @method isIgnore
+   * @description Check if path is ignore.
+   * @param path File path.
+   */
+  private isIgnore;
+  /**
+   * @private
+   * @method setupHeaders
+   * @description Setup headers
+   * @param context Koa context
+   * @param path File path
+   * @param stats File stats
+   */
+  private setupHeaders;
+  /**
+   * @private
+   * @method write
+   * @description Write file to stream.
+   * @param stream Destination stream.
+   * @param path The file path to read.
+   * @param range The range to read.
+   * @param end Is destory destination stream after read complete.
+   */
+  private write;
+  /**
+   * @private
+   * @method send
+   * @description Send file.
+   * @param context Koa context.
+   * @param path File path.
+   * @param ranges Read ranges.
+   */
+  private send;
+  /**
+   * @public
+   * @method response
+   * @description Response to koa context.
+   * @param context Koa context.
+   */
+  response(context: Context): Promise<boolean>;
+}
+export {};

package/types/server/dev/index.d.ts

@@ -2,7 +2,7 @@
  * @module index
  */
 import { Middleware } from 'koa';
-import { Compiler } from 'webpack';
-import { AdditionalMethods, Options } from './interface';
-export { AdditionalMethods, Options };
-export declare function dev(compiler: Compiler, options?: Options): Middleware & AdditionalMethods;
+import { ICompiler } from '../../server/interface';
+import { Expose, Options } from './interface';
+export { Expose, Options };
+export declare function dev(compiler: ICompiler, options: Options): Middleware & Expose;

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

@@ -1,46 +1,38 @@
 /**
  * @module interface
  */
-/// <reference types="node" />
-import { createReadStream, Stats as FileStats } from 'fs';
-import { Compiler, Configuration, MultiCompiler, MultiStats, Stats, Watching } from 'webpack';
-type IOutputFileSystem = NonNullable<Compiler['outputFileSystem']>;
-interface HeaderFunction {
-  (path: string, stats: FileStats): Record<string, string | string[]>;
+import { StatsOptions } from 'webpack';
+import { FileSystem } from './utils/fs';
+import { Options as ServiceOptions, Service } from './Service';
+import { ICompiler, ILogger, IStats, IStatsOptions, IWatching } from '../../server/interface';
+export interface Callback {
+  (stats: IStats): void;
 }
-export interface OutputFileSystem extends IOutputFileSystem {
-  createReadStream: typeof createReadStream;
+export interface ErrorCallback {
+  (error?: Error | null): void;
 }
-export type Callback = (stats: Stats | MultiStats | null) => void;
-export interface FilesOptions {
-  etag?: boolean;
-  fs: OutputFileSystem;
-  cacheControl?: string;
-  acceptRanges?: boolean;
-  lastModified?: boolean;
-  headers?: HeaderFunction | Record<string, string | string[]>;
+export interface Expose {
+  readonly state: boolean;
+  readonly logger: ILogger;
+  readonly ready: (callback: Callback) => void;
+  readonly close: (callback: ErrorCallback) => void;
+  readonly invalidate: (callback: ErrorCallback) => void;
 }
-export interface Options extends Omit<FilesOptions, 'fs'> {
-  stats?: Configuration['stats'];
-  outputFileSystem?: OutputFileSystem;
+export interface Options extends Omit<ServiceOptions, 'fs'> {
+  fs?: FileSystem;
+  stats?: IStatsOptions;
   writeToDisk?: boolean | ((targetPath: string) => boolean);
+  onCompilerDone?(stats: IStats, statsOptions: Readonly<StatsOptions>): void;
 }
+export type FileService = [publicPath: string, service: Service];
 export interface Context {
-  state: boolean;
+  fs: FileSystem;
+  logger: ILogger;
   options: Options;
+  compiler: ICompiler;
+  watching: IWatching;
+  stats: IStats | null;
   callbacks: Callback[];
-  stats: Stats | MultiStats | null;
-  compiler: Compiler | MultiCompiler;
-  outputFileSystem: OutputFileSystem;
-  logger: ReturnType<Compiler['getInfrastructureLogger']>;
-  watching: Watching | ReturnType<MultiCompiler['watch']>;
+  services?: FileService[];
 }
-export interface AdditionalMethods {
-  isReady(): boolean;
-  logger: Context['logger'];
-  ready(callback: Callback): void;
-  invalidate(callback: Callback): void;
-  close(callback: (error?: Error | null) => void): void;
-}
-export type InitialContext = Optional<Context, 'watching' | 'outputFileSystem'>;
-export {};
+export type InitialContext = Optional<Context, 'fs' | 'watching'>;

package/types/server/dev/utils/fs.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @module fs
+ */
+/// <reference types="node" />
+/// <reference types="node" />
+import { Compiler } from 'webpack';
+import { ReadStream, Stats } from 'fs';
+type PathLike = string | Buffer | URL;
+type FileStats = Stats | null | undefined;
+type IFileSystem = NonNullable<Compiler['outputFileSystem']>;
+/**
+ * @function stat
+ * @description Get file stats.
+ * @param fs The file system to used.
+ * @param path The file path.
+ */
+export declare function stat(fs: FileSystem, path: string): Promise<FileStats>;
+export interface FileSystem extends IFileSystem {
+  createReadStream(
+    path: PathLike,
+    options?: {
+      start?: number;
+      end?: number;
+    }
+  ): ReadStream;
+}
+export {};

package/types/server/dev/utils/hash.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @module hash
+ */
+/**
+ * @function generate
+ * @description Generate a hash.
+ * @param length The length of hash.
+ */
+export declare function generate(length?: number): string;

package/types/server/dev/utils/http.d.ts

@@ -1,22 +1,39 @@
 /**
- * @method http
+ * @module http
  */
+/// <reference types="node" />
+import { Stats } from 'fs';
+import { Context } from 'koa';
+export interface Range {
+  start: number;
+  end?: number;
+  prefix?: string;
+  suffix?: string;
+}
+type Ranges = Range[] | -1 | -2;
 /**
- * @function parseTokens
- * @description Parse HTTP tokens.
- * @param value The tokens value string.
+ * @function decodeURI
+ * @description Decode URI component.
+ * @param URI The URI to decode.
  */
-export declare function parseTokens(value: string): string[];
+export declare function decodeURI(URI: string): string | -1;
 /**
- * @function isETag
- * @description Check if etag is valid.
- * @param value The value to check.
+ * @function isConditionalGET
+ * @description Check if request is conditional GET.
+ * @param context Koa context.
  */
-export declare function isETag(value: string): boolean;
+export declare function isConditionalGET(context: Context): boolean;
 /**
- * @function isETagFresh
- * @description Check if etag is fresh.
- * @param match The match value.
- * @param etag The etag value.
+ * @function isPreconditionFailure
+ * @description Check if request precondition failure.
+ * @param context Koa context.
  */
-export declare function isETagFresh(match: string, etag: string): boolean;
+export declare function isPreconditionFailure({ request, response }: Context): boolean;
+/**
+ * @function parseRanges
+ * @description Parse ranges.
+ * @param context Koa context.
+ * @param stats File stats.
+ */
+export declare function parseRanges(context: Context, stats: Stats): Ranges;
+export {};

package/types/server/dev/utils/path.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @module path
+ */
+/**
+ * @function unixify
+ * @description Convert path to unix style.
+ * @param path The path to convert.
+ */
+export declare function unixify(path: string): string;
+/**
+ * @function hasTrailingSlash
+ * @description Check if path has trailing slash.
+ * @param path The path to check.
+ */
+export declare function hasTrailingSlash(path: string): boolean;
+/**
+ * @function isOutRoot
+ * @description Check if path is out of root.
+ * @param path The path to check.
+ * @param root The root path.
+ */
+export declare function isOutRoot(path: string, root: string): boolean;