@modern-js/server 1.19.0 → 1.20.1

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @modern-js/server
 
+## 1.20.1
+
+### Patch Changes
+
+- Updated dependencies [49515c5]
+  - @modern-js/utils@1.20.1
+  - @modern-js/prod-server@1.20.1
+  - @modern-js/server-utils@1.20.1
+  - @modern-js/types@1.20.1
+
+## 1.20.0
+
+### Patch Changes
+
+- 35c0959: feat(devServer): support devServer.setupMiddlewares config
+
+  feat(devServer): 支持 devServer.setupMiddlewares 配置项
+
+- 4ddc185: chore(builder): bump webpack to 5.74.0
+
+  chore(builder): 升级 webpack 到 5.74.0 版本
+
+- 66e4817: feat: support devServer.historyApiFallback
+
+  feat: 支持 devServer.historyApiFallback 配置项
+
+- face165: chore(devServer): get devServer config from this.dev
+
+  chore(devServer): 从 this.dev 上获取 devServer 配置
+
+- Updated dependencies [d5d570b]
+- Updated dependencies [4ddc185]
+- Updated dependencies [66e4817]
+- Updated dependencies [df8ee7e]
+- Updated dependencies [8c05089]
+- Updated dependencies [baf7337]
+  - @modern-js/utils@1.20.0
+  - @modern-js/types@1.20.0
+  - @modern-js/prod-server@1.20.0
+  - @modern-js/server-utils@1.20.0
+
 ## 1.19.0
 
 ### Patch Changes

package/dist/js/modern/constants.js

@@ -4,8 +4,6 @@ export const getDefaultDevOptions = () => {
   return {
     client: {
       port: '8080',
-      overlay: false,
-      logging: 'none',
       path: HMR_SOCK_PATH,
       host: (network === null || network === void 0 ? void 0 : network.address) || 'localhost'
     },

package/dist/js/modern/dev-tools/dev-middleware/index.js

@@ -16,7 +16,7 @@ export default class DevMiddleware extends EventEmitter {
   constructor({
     compiler,
     dev,
-    config
+    devMiddleware
   }) {
     super();
 
@@ -28,11 +28,8 @@ export default class DevMiddleware extends EventEmitter {
 
     _defineProperty(this, "socketServer", void 0);
 
-    _defineProperty(this, "config", void 0);
-
     this.compiler = compiler;
-    this.devOptions = dev;
-    this.config = config; // init socket server
+    this.devOptions = dev; // init socket server
 
     this.socketServer = new SocketServer(dev); // Todo: should remove after abstract dev middleware
 
@@ -43,7 +40,7 @@ export default class DevMiddleware extends EventEmitter {
 
       this.setupHooks(); // start dev middleware
 
-      this.middleware = this.setupDevMiddleware();
+      this.middleware = this.setupDevMiddleware(devMiddleware);
     }
   }
 
@@ -75,6 +72,10 @@ export default class DevMiddleware extends EventEmitter {
     }
   }
 
+  sockWrite(type, data) {
+    this.socketServer.sockWrite(type, data);
+  }
+
   setupHooks() {
     const invalidPlugin = () => {
       this.socketServer.sockWrite('invalid');
@@ -105,15 +106,12 @@ export default class DevMiddleware extends EventEmitter {
     }
   }
 
-  setupDevMiddleware() {
-    var _config$tools, _config$tools$devServ;
-
+  setupDevMiddleware(devMiddleware = webpackDevMiddleware) {
     const {
-      config,
       devOptions
     } = this;
-    const middleware = webpackDevMiddleware(this.compiler, _objectSpread({
-      headers: (_config$tools = config.tools) === null || _config$tools === void 0 ? void 0 : (_config$tools$devServ = _config$tools.devServer) === null || _config$tools$devServ === void 0 ? void 0 : _config$tools$devServ.headers,
+    const middleware = devMiddleware(this.compiler, _objectSpread({
+      headers: devOptions.headers,
       stats: false
     }, devOptions.devMiddleware));
     return middleware;

package/dist/js/modern/dev-tools/dev-middleware/socket-server.js

@@ -94,8 +94,6 @@ export default class SocketServer {
   }
 
   onConnect(socket) {
-    var _this$options$client2, _this$options$client3, _this$options$client4;
-
     const connection = socket;
     connection.isAlive = true;
     connection.on('pong', () => {
@@ -115,24 +113,12 @@ export default class SocketServer {
       }
     });
 
-    if ((_this$options$client2 = this.options.client) !== null && _this$options$client2 !== void 0 && _this$options$client2.logging) {
-      this.singleWrite(connection, 'logging', this.options.client.logging);
-    }
-
     if (this.options.hot || this.options.hot === 'only') {
       this.singleWrite(connection, 'hot');
     }
 
     if (this.options.liveReload) {
       this.singleWrite(connection, 'liveReload');
-    }
-
-    if ((_this$options$client3 = this.options.client) !== null && _this$options$client3 !== void 0 && _this$options$client3.progress) {
-      this.singleWrite(connection, 'progress', this.options.client.progress);
-    }
-
-    if ((_this$options$client4 = this.options.client) !== null && _this$options$client4 !== void 0 && _this$options$client4.overlay) {
-      this.singleWrite(connection, 'overlay', this.options.client.overlay);
     } // send first stats to active client sock if stats exist
 
 

package/dist/js/modern/server/dev-server.js

@@ -33,7 +33,7 @@ export class ModernDevServer extends ModernServer {
     this.devMiddleware = new DevMiddleware({
       dev: this.dev,
       compiler: options.compiler,
-      config: this.conf
+      devMiddleware: options.devMiddleware
     });
     enableRegister(this.pwd, this.conf);
   }
@@ -44,22 +44,10 @@ export class ModernDevServer extends ModernServer {
     return _objectSpread(_objectSpread(_objectSpread({}, defaultOptions), devOptions), {}, {
       client: _objectSpread(_objectSpread({}, defaultOptions.client), devOptions === null || devOptions === void 0 ? void 0 : devOptions.client)
     });
-  } // Complete the preparation of services
-
-
-  async onInit(runner, app) {
-    var _conf$tools, _conf$tools$devServer;
-
-    this.runner = runner;
-    const {
-      conf,
-      pwd,
-      dev,
-      devMiddleware
-    } = this; // before dev handler
+  }
 
-    const beforeHandlers = await this.setupBeforeDevMiddleware();
-    beforeHandlers.forEach(handler => {
+  addMiddlewareHandler(handlers) {
+    handlers.forEach(handler => {
       this.addHandler((ctx, next) => {
         const {
           req,
@@ -68,9 +56,64 @@ export class ModernDevServer extends ModernServer {
         return handler(req, res, next);
       });
     });
-    this.addHandler((ctx, next) => {
-      var _this$conf$tools$devS;
+  }
+
+  applySetupMiddlewares() {
+    const setupMiddlewares = this.dev.setupMiddlewares || [];
+    const serverOptions = {
+      sockWrite: (type, data) => this.devMiddleware.sockWrite(type, data)
+    };
+    const befores = [];
+    const afters = [];
+    setupMiddlewares.forEach(handler => {
+      handler({
+        unshift: (...handlers) => befores.unshift(...handlers),
+        push: (...handlers) => afters.push(...handlers)
+      }, serverOptions);
+    });
+    return {
+      befores,
+      afters
+    };
+  } // Complete the preparation of services
+
+
+  async onInit(runner, app) {
+    this.runner = runner;
+    const {
+      dev
+    } = this; // Order: devServer.before => setupMiddlewares.unshift => internal middlewares => setupMiddlewares.push => devServer.after
+
+    const {
+      befores,
+      afters
+    } = this.applySetupMiddlewares(); // before dev handler
+
+    const beforeHandlers = await this.setupBeforeDevMiddleware();
+    this.addMiddlewareHandler([...beforeHandlers, ...befores]);
+    await this.applyDefaultMiddlewares(app); // after dev handler
+
+    const afterHandlers = await this.setupAfterDevMiddleware();
+    this.addMiddlewareHandler([...afters, ...afterHandlers]);
+    await super.onInit(runner, app); // watch mock/ server/ api/ dir file change
+
+    if (dev.watch) {
+      this.startWatcher();
+      app.on('close', async () => {
+        var _this$watcher;
 
+        await ((_this$watcher = this.watcher) === null || _this$watcher === void 0 ? void 0 : _this$watcher.close());
+      });
+    }
+  }
+
+  async applyDefaultMiddlewares(app) {
+    const {
+      pwd,
+      dev,
+      devMiddleware
+    } = this;
+    this.addHandler((ctx, next) => {
       // allow hmr request cross-domain, because the user may use global proxy
       if (ctx.path.includes('hot-update')) {
         ctx.res.setHeader('Access-Control-Allow-Origin', '*');
@@ -78,7 +121,7 @@ export class ModernDevServer extends ModernServer {
       } // 用户在 devServer 上配置的 headers 不会对 html 的请求生效，加入下面代码，使配置的 headers 对所有请求生效
 
 
-      const confHeaders = (_this$conf$tools$devS = this.conf.tools.devServer) === null || _this$conf$tools$devS === void 0 ? void 0 : _this$conf$tools$devS.headers;
+      const confHeaders = dev.headers;
 
       if (confHeaders) {
         for (const [key, value] of Object.entries(confHeaders)) {
@@ -100,7 +143,7 @@ export class ModernDevServer extends ModernServer {
       }
     }); // dev proxy handler, each proxy has own handler
 
-    const proxyHandlers = createProxyHandler((_conf$tools = conf.tools) === null || _conf$tools === void 0 ? void 0 : (_conf$tools$devServer = _conf$tools.devServer) === null || _conf$tools$devServer === void 0 ? void 0 : _conf$tools$devServer.proxy);
+    const proxyHandlers = createProxyHandler(dev.proxy);
 
     if (proxyHandlers) {
       proxyHandlers.forEach(handler => {
@@ -131,27 +174,14 @@ export class ModernDevServer extends ModernServer {
       } else {
         next();
       }
-    }); // after dev handler
-
-    const afterHandlers = await this.setupAfterDevMiddleware();
-    afterHandlers.forEach(handler => {
-      this.addHandler((ctx, next) => {
-        const {
-          req,
-          res
-        } = ctx;
-        return handler(req, res, next);
-      });
     });
-    await super.onInit(runner, app); // watch mock/ server/ api/ dir file change
 
-    if (dev.watch) {
-      this.startWatcher();
-      app.on('close', async () => {
-        var _this$watcher;
-
-        await ((_this$watcher = this.watcher) === null || _this$watcher === void 0 ? void 0 : _this$watcher.close());
-      });
+    if (dev.historyApiFallback) {
+      const {
+        default: connectHistoryApiFallback
+      } = await import('connect-history-api-fallback');
+      const historyApiFallbackMiddleware = connectHistoryApiFallback(typeof dev.historyApiFallback === 'boolean' ? {} : dev.historyApiFallback);
+      this.addHandler((ctx, next) => historyApiFallbackMiddleware(ctx.req, ctx.res, next));
     }
   }
 
@@ -234,25 +264,23 @@ export class ModernDevServer extends ModernServer {
   }
 
   async setupBeforeDevMiddleware() {
-    var _conf$tools$devServer2;
-
     const {
       runner,
-      conf
+      conf,
+      dev
     } = this;
-    const setupMids = ((_conf$tools$devServer2 = conf.tools.devServer) === null || _conf$tools$devServer2 === void 0 ? void 0 : _conf$tools$devServer2.before) || [];
+    const setupMids = dev.before || [];
     const pluginMids = await runner.beforeDevServer(conf);
     return [...setupMids, ...pluginMids].flat();
   }
 
   async setupAfterDevMiddleware() {
-    var _conf$tools$devServer3;
-
     const {
       runner,
-      conf
+      conf,
+      dev
     } = this;
-    const setupMids = ((_conf$tools$devServer3 = conf.tools.devServer) === null || _conf$tools$devServer3 === void 0 ? void 0 : _conf$tools$devServer3.after) || [];
+    const setupMids = dev.after || [];
     const pluginMids = await runner.afterDevServer(conf);
     return [...pluginMids, ...setupMids].flat();
   }

package/dist/js/node/constants.js

@@ -12,8 +12,6 @@ const getDefaultDevOptions = () => {
   return {
     client: {
       port: '8080',
-      overlay: false,
-      logging: 'none',
       path: _utils.HMR_SOCK_PATH,
       host: (network === null || network === void 0 ? void 0 : network.address) || 'localhost'
     },

package/dist/js/node/dev-tools/dev-middleware/index.js

@@ -28,7 +28,7 @@ class DevMiddleware extends _events.EventEmitter {
   constructor({
     compiler,
     dev,
-    config
+    devMiddleware
   }) {
     super();
 
@@ -40,11 +40,8 @@ class DevMiddleware extends _events.EventEmitter {
 
     _defineProperty(this, "socketServer", void 0);
 
-    _defineProperty(this, "config", void 0);
-
     this.compiler = compiler;
-    this.devOptions = dev;
-    this.config = config; // init socket server
+    this.devOptions = dev; // init socket server
 
     this.socketServer = new _socketServer.default(dev); // Todo: should remove after abstract dev middleware
 
@@ -55,7 +52,7 @@ class DevMiddleware extends _events.EventEmitter {
 
       this.setupHooks(); // start dev middleware
 
-      this.middleware = this.setupDevMiddleware();
+      this.middleware = this.setupDevMiddleware(devMiddleware);
     }
   }
 
@@ -87,6 +84,10 @@ class DevMiddleware extends _events.EventEmitter {
     }
   }
 
+  sockWrite(type, data) {
+    this.socketServer.sockWrite(type, data);
+  }
+
   setupHooks() {
     const invalidPlugin = () => {
       this.socketServer.sockWrite('invalid');
@@ -117,15 +118,12 @@ class DevMiddleware extends _events.EventEmitter {
     }
   }
 
-  setupDevMiddleware() {
-    var _config$tools, _config$tools$devServ;
-
+  setupDevMiddleware(devMiddleware = _webpackDevMiddleware.default) {
     const {
-      config,
       devOptions
     } = this;
-    const middleware = (0, _webpackDevMiddleware.default)(this.compiler, _objectSpread({
-      headers: (_config$tools = config.tools) === null || _config$tools === void 0 ? void 0 : (_config$tools$devServ = _config$tools.devServer) === null || _config$tools$devServ === void 0 ? void 0 : _config$tools$devServ.headers,
+    const middleware = devMiddleware(this.compiler, _objectSpread({
+      headers: devOptions.headers,
       stats: false
     }, devOptions.devMiddleware));
     return middleware;

package/dist/js/node/dev-tools/dev-middleware/socket-server.js

@@ -105,8 +105,6 @@ class SocketServer {
   }
 
   onConnect(socket) {
-    var _this$options$client2, _this$options$client3, _this$options$client4;
-
     const connection = socket;
     connection.isAlive = true;
     connection.on('pong', () => {
@@ -126,24 +124,12 @@ class SocketServer {
       }
     });
 
-    if ((_this$options$client2 = this.options.client) !== null && _this$options$client2 !== void 0 && _this$options$client2.logging) {
-      this.singleWrite(connection, 'logging', this.options.client.logging);
-    }
-
     if (this.options.hot || this.options.hot === 'only') {
       this.singleWrite(connection, 'hot');
     }
 
     if (this.options.liveReload) {
       this.singleWrite(connection, 'liveReload');
-    }
-
-    if ((_this$options$client3 = this.options.client) !== null && _this$options$client3 !== void 0 && _this$options$client3.progress) {
-      this.singleWrite(connection, 'progress', this.options.client.progress);
-    }
-
-    if ((_this$options$client4 = this.options.client) !== null && _this$options$client4 !== void 0 && _this$options$client4.overlay) {
-      this.singleWrite(connection, 'overlay', this.options.client.overlay);
     } // send first stats to active client sock if stats exist
 
 

package/dist/js/node/server/dev-server.js

@@ -25,12 +25,12 @@ var _watcher = _interopRequireWildcard(require("../dev-tools/watcher"));
 
 var _devMiddleware = _interopRequireDefault(require("../dev-tools/dev-middleware"));
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -56,7 +56,7 @@ class ModernDevServer extends _prodServer.ModernServer {
     this.devMiddleware = new _devMiddleware.default({
       dev: this.dev,
       compiler: options.compiler,
-      config: this.conf
+      devMiddleware: options.devMiddleware
     });
     (0, _register.enableRegister)(this.pwd, this.conf);
   }
@@ -67,22 +67,10 @@ class ModernDevServer extends _prodServer.ModernServer {
     return _objectSpread(_objectSpread(_objectSpread({}, defaultOptions), devOptions), {}, {
       client: _objectSpread(_objectSpread({}, defaultOptions.client), devOptions === null || devOptions === void 0 ? void 0 : devOptions.client)
     });
-  } // Complete the preparation of services
-
-
-  async onInit(runner, app) {
-    var _conf$tools, _conf$tools$devServer;
-
-    this.runner = runner;
-    const {
-      conf,
-      pwd,
-      dev,
-      devMiddleware
-    } = this; // before dev handler
+  }
 
-    const beforeHandlers = await this.setupBeforeDevMiddleware();
-    beforeHandlers.forEach(handler => {
+  addMiddlewareHandler(handlers) {
+    handlers.forEach(handler => {
       this.addHandler((ctx, next) => {
         const {
           req,
@@ -91,9 +79,64 @@ class ModernDevServer extends _prodServer.ModernServer {
         return handler(req, res, next);
       });
     });
-    this.addHandler((ctx, next) => {
-      var _this$conf$tools$devS;
+  }
 
+  applySetupMiddlewares() {
+    const setupMiddlewares = this.dev.setupMiddlewares || [];
+    const serverOptions = {
+      sockWrite: (type, data) => this.devMiddleware.sockWrite(type, data)
+    };
+    const befores = [];
+    const afters = [];
+    setupMiddlewares.forEach(handler => {
+      handler({
+        unshift: (...handlers) => befores.unshift(...handlers),
+        push: (...handlers) => afters.push(...handlers)
+      }, serverOptions);
+    });
+    return {
+      befores,
+      afters
+    };
+  } // Complete the preparation of services
+
+
+  async onInit(runner, app) {
+    this.runner = runner;
+    const {
+      dev
+    } = this; // Order: devServer.before => setupMiddlewares.unshift => internal middlewares => setupMiddlewares.push => devServer.after
+
+    const {
+      befores,
+      afters
+    } = this.applySetupMiddlewares(); // before dev handler
+
+    const beforeHandlers = await this.setupBeforeDevMiddleware();
+    this.addMiddlewareHandler([...beforeHandlers, ...befores]);
+    await this.applyDefaultMiddlewares(app); // after dev handler
+
+    const afterHandlers = await this.setupAfterDevMiddleware();
+    this.addMiddlewareHandler([...afters, ...afterHandlers]);
+    await super.onInit(runner, app); // watch mock/ server/ api/ dir file change
+
+    if (dev.watch) {
+      this.startWatcher();
+      app.on('close', async () => {
+        var _this$watcher;
+
+        await ((_this$watcher = this.watcher) === null || _this$watcher === void 0 ? void 0 : _this$watcher.close());
+      });
+    }
+  }
+
+  async applyDefaultMiddlewares(app) {
+    const {
+      pwd,
+      dev,
+      devMiddleware
+    } = this;
+    this.addHandler((ctx, next) => {
       // allow hmr request cross-domain, because the user may use global proxy
       if (ctx.path.includes('hot-update')) {
         ctx.res.setHeader('Access-Control-Allow-Origin', '*');
@@ -101,7 +144,7 @@ class ModernDevServer extends _prodServer.ModernServer {
       } // 用户在 devServer 上配置的 headers 不会对 html 的请求生效，加入下面代码，使配置的 headers 对所有请求生效
 
 
-      const confHeaders = (_this$conf$tools$devS = this.conf.tools.devServer) === null || _this$conf$tools$devS === void 0 ? void 0 : _this$conf$tools$devS.headers;
+      const confHeaders = dev.headers;
 
       if (confHeaders) {
         for (const [key, value] of Object.entries(confHeaders)) {
@@ -123,7 +166,7 @@ class ModernDevServer extends _prodServer.ModernServer {
       }
     }); // dev proxy handler, each proxy has own handler
 
-    const proxyHandlers = (0, _prodServer.createProxyHandler)((_conf$tools = conf.tools) === null || _conf$tools === void 0 ? void 0 : (_conf$tools$devServer = _conf$tools.devServer) === null || _conf$tools$devServer === void 0 ? void 0 : _conf$tools$devServer.proxy);
+    const proxyHandlers = (0, _prodServer.createProxyHandler)(dev.proxy);
 
     if (proxyHandlers) {
       proxyHandlers.forEach(handler => {
@@ -154,27 +197,14 @@ class ModernDevServer extends _prodServer.ModernServer {
       } else {
         next();
       }
-    }); // after dev handler
-
-    const afterHandlers = await this.setupAfterDevMiddleware();
-    afterHandlers.forEach(handler => {
-      this.addHandler((ctx, next) => {
-        const {
-          req,
-          res
-        } = ctx;
-        return handler(req, res, next);
-      });
     });
-    await super.onInit(runner, app); // watch mock/ server/ api/ dir file change
-
-    if (dev.watch) {
-      this.startWatcher();
-      app.on('close', async () => {
-        var _this$watcher;
 
-        await ((_this$watcher = this.watcher) === null || _this$watcher === void 0 ? void 0 : _this$watcher.close());
-      });
+    if (dev.historyApiFallback) {
+      const {
+        default: connectHistoryApiFallback
+      } = await Promise.resolve().then(() => _interopRequireWildcard(require('connect-history-api-fallback')));
+      const historyApiFallbackMiddleware = connectHistoryApiFallback(typeof dev.historyApiFallback === 'boolean' ? {} : dev.historyApiFallback);
+      this.addHandler((ctx, next) => historyApiFallbackMiddleware(ctx.req, ctx.res, next));
     }
   }
 
@@ -259,25 +289,23 @@ class ModernDevServer extends _prodServer.ModernServer {
   }
 
   async setupBeforeDevMiddleware() {
-    var _conf$tools$devServer2;
-
     const {
       runner,
-      conf
+      conf,
+      dev
     } = this;
-    const setupMids = ((_conf$tools$devServer2 = conf.tools.devServer) === null || _conf$tools$devServer2 === void 0 ? void 0 : _conf$tools$devServer2.before) || [];
+    const setupMids = dev.before || [];
     const pluginMids = await runner.beforeDevServer(conf);
     return [...setupMids, ...pluginMids].flat();
   }
 
   async setupAfterDevMiddleware() {
-    var _conf$tools$devServer3;
-
     const {
       runner,
-      conf
+      conf,
+      dev
     } = this;
-    const setupMids = ((_conf$tools$devServer3 = conf.tools.devServer) === null || _conf$tools$devServer3 === void 0 ? void 0 : _conf$tools$devServer3.after) || [];
+    const setupMids = dev.after || [];
     const pluginMids = await runner.afterDevServer(conf);
     return [...pluginMids, ...setupMids].flat();
   }

package/dist/types/dev-tools/dev-middleware/index.d.ts

@@ -1,29 +1,27 @@
 /// <reference types="node" />
 /// <reference types="node" />
-import { Server, IncomingMessage, ServerResponse } from 'http';
+import { Server } from 'http';
 import { EventEmitter } from 'events';
 import { Compiler, MultiCompiler } from 'webpack';
-import webpackDevMiddleware from '@modern-js/utils/webpack-dev-middleware';
-import type { NormalizedConfig } from '@modern-js/core';
-import { DevServerOptions } from '../../types';
+import { DevServerOptions, DevMiddlewareAPI, CustomDevMiddleware } from '../../types';
 declare type Options = {
   compiler: MultiCompiler | Compiler | null;
   dev: DevServerOptions;
-  config: NormalizedConfig;
+  devMiddleware?: CustomDevMiddleware;
 };
 export default class DevMiddleware extends EventEmitter {
-  middleware?: webpackDevMiddleware.API<IncomingMessage, ServerResponse>;
+  middleware?: DevMiddlewareAPI;
   private compiler;
   private devOptions;
   private socketServer;
-  private config;
   constructor({
     compiler,
     dev,
-    config
+    devMiddleware
   }: Options);
   init(app: Server): void;
   private setupDevServerPlugin;
+  sockWrite(type: string, data?: Record<string, any> | string | boolean): void;
   private setupHooks;
   private setupDevMiddleware;
   private isClientCompiler;

package/dist/types/server/dev-server.d.ts

@@ -11,7 +11,10 @@ export declare class ModernDevServer extends ModernServer {
   private watcher?;
   constructor(options: ModernDevServerOptions);
   private getDevOptions;
+  private addMiddlewareHandler;
+  private applySetupMiddlewares;
   onInit(runner: ServerHookRunner, app: Server): Promise<void>;
+  private applyDefaultMiddlewares;
   onRepack(options?: BuildOptions): void;
   createHTTPServer(handler: (req: IncomingMessage, res: ServerResponse, next?: () => void) => void): Promise<Server | import("https").Server>;
   protected warmupSSRBundle(): void;

package/dist/types/types.d.ts

@@ -1,9 +1,21 @@
+/// <reference types="node" />
+import type { IncomingMessage, ServerResponse } from 'http';
 import type webpack from 'webpack';
-import type { DevServerOptions, DevServerHttpsOptions } from '@modern-js/types';
+import type { DevServerOptions, DevServerHttpsOptions, NextFunction } from '@modern-js/types';
 import type { ModernServerOptions } from '@modern-js/prod-server';
 export type { DevServerOptions, DevServerHttpsOptions };
+declare type Middleware = (req: IncomingMessage, res: ServerResponse, next: NextFunction) => Promise<void>;
+export declare type DevMiddlewareAPI = Middleware & {
+  close: (callback: (err: Error | null | undefined) => void) => any;
+};
+export declare type CustomDevMiddleware = (compiler: webpack.MultiCompiler | webpack.Compiler, options: {
+  headers?: Record<string, string>;
+  writeToDisk?: boolean | ((filename: string) => boolean);
+  stats?: boolean;
+}) => DevMiddlewareAPI;
 export declare type ExtraOptions = {
   dev: boolean | Partial<DevServerOptions>;
   compiler: webpack.MultiCompiler | webpack.Compiler | null;
+  devMiddleware?: CustomDevMiddleware;
 };
 export declare type ModernDevServerOptions = ModernServerOptions & ExtraOptions;

package/package.json

@@ -11,7 +11,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "1.19.0",
+  "version": "1.20.1",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/types/index.d.ts",
   "main": "./dist/js/node/index.js",
@@ -30,29 +30,32 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@babel/register": "^7.17.7",
-    "@modern-js/prod-server": "1.19.0",
-    "@modern-js/server-utils": "1.19.0",
-    "@modern-js/types": "1.19.0",
-    "@modern-js/utils": "1.19.0",
+    "@modern-js/prod-server": "1.20.1",
+    "@modern-js/server-utils": "1.20.1",
+    "@modern-js/types": "1.20.1",
+    "@modern-js/utils": "1.20.1",
+    "connect-history-api-fallback": "^2.0.0",
     "devcert": "^1.2.2",
     "minimatch": "^3.0.4",
     "path-to-regexp": "^6.2.0",
     "ws": "^8.2.0"
   },
   "devDependencies": {
-    "@modern-js/core": "1.19.0",
-    "@modern-js/server-core": "1.19.0",
-    "@scripts/build": "1.19.0",
-    "@scripts/jest-config": "1.19.0",
+    "@modern-js/core": "1.20.1",
+    "@modern-js/server-core": "1.20.1",
+    "@scripts/build": "1.20.1",
+    "@scripts/jest-config": "1.20.1",
+    "@types/connect-history-api-fallback": "^1.3.5",
     "@types/jest": "^27",
     "@types/minimatch": "^3.0.5",
     "@types/node": "^14",
     "@types/ws": "^7.4.7",
     "jest": "^27",
+    "node-mocks-http": "^1.11.0",
     "ts-node": "^10.1.0",
     "tsconfig-paths": "3.14.1",
     "typescript": "^4",
-    "webpack": "^5.71.0",
+    "webpack": "^5.74.0",
     "websocket": "^1"
   },
   "peerDependencies": {