@modern-js/server 1.18.0 → 1.18.1-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @modern-js/server
 
+## 1.18.1-alpha.0
+
+### Patch Changes
+
+- 8016a8a: fix: invoke next() in dev-middleware directly if only api
+  fix: 在 api 服务的情况下，直接调用 next()，不执行 dev-middleware
+- f6a3aa1: feat: support etag in dev server by default
+  feat: 开发环境默认支持 etag 功能
+- 23fa468: fix: ssr bundle should not be compiled by ts-node
+
+  fix: ts-node 不应该编译 ssr bundle
+
+- 55988fa: fix: fix dev server type error
+  fix: 修复 dev server 中的类型错误
+- bc3bbd8: fix: use output.publicPath(default) as webpack-dev-middleware publicPath
+
+  fix: 使用 output.publicPath 作为 webpack-dev-middleware publicPath
+
+- Updated dependencies [3586707]
+- Updated dependencies [f6a3aa1]
+- Updated dependencies [fb02c81]
+- Updated dependencies [9f7bfa6]
+- Updated dependencies [9fcfbd4]
+- Updated dependencies [6c2c745]
+  - @modern-js/prod-server@1.18.1-alpha.0
+  - @modern-js/server-utils@1.18.1-alpha.0
+  - @modern-js/utils@1.18.1-alpha.0
+
 ## 1.18.0
 
 ### Patch Changes

package/dist/js/modern/dev-tools/{dev-server-plugin.js → dev-middleware/dev-server-plugin.js}

@@ -14,7 +14,7 @@ export default class DevServerPlugin {
     const host = client.host ? `&host=${client.host}` : '';
     const path = client.path ? `&path=${client.path}` : '';
     const port = client.port ? `&port=${client.port}` : '';
-    const clientEntry = `${require.resolve("../hmr-client")}?${host}${path}${port}`; // use a hook to add entries if available
+    const clientEntry = `${require.resolve("./hmr-client")}?${host}${path}${port}`; // use a hook to add entries if available
 
     new compiler.webpack.EntryPlugin(compiler.context, clientEntry, {
       name: undefined

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

@@ -0,0 +1,138 @@
+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; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import { EventEmitter } from 'events';
+import webpackDevMiddleware from '@modern-js/utils/webpack-dev-middleware';
+import DevServerPlugin from "./dev-server-plugin";
+import SocketServer from "./socket-server";
+
+const noop = () => {// noop
+};
+
+export default class DevMiddleware extends EventEmitter {
+  constructor({
+    compiler,
+    dev,
+    config
+  }) {
+    super();
+
+    _defineProperty(this, "middleware", void 0);
+
+    _defineProperty(this, "compiler", void 0);
+
+    _defineProperty(this, "devOptions", void 0);
+
+    _defineProperty(this, "socketServer", void 0);
+
+    _defineProperty(this, "config", void 0);
+
+    this.compiler = compiler;
+    this.devOptions = dev;
+    this.config = config; // init socket server
+
+    this.socketServer = new SocketServer(dev); // Todo: should remove after abstract dev middleware
+
+    if (this.compiler) {
+      // setup compiler in server, also add dev-middleware to handler static file in memory
+      // set up plugin to each compiler
+      this.setupDevServerPlugin(); // register hooks for each compilation, update socket stats if recompiled
+
+      this.setupHooks(); // start dev middleware
+
+      this.middleware = this.setupDevMiddleware();
+    }
+  }
+
+  init(app) {
+    app.on('listening', () => {
+      this.socketServer.prepare(app);
+    });
+    app.on('close', async () => {
+      var _this$middleware;
+
+      (_this$middleware = this.middleware) === null || _this$middleware === void 0 ? void 0 : _this$middleware.close(noop);
+      this.socketServer.close();
+    });
+  }
+
+  setupDevServerPlugin() {
+    const {
+      devOptions
+    } = this; // apply dev server to client compiler, add hmr client to entry.
+
+    if (this.compiler.compilers) {
+      this.compiler.compilers.forEach(target => {
+        if (this.isClientCompiler(target)) {
+          new DevServerPlugin(devOptions).apply(target);
+        }
+      });
+    } else {
+      new DevServerPlugin(devOptions).apply(this.compiler);
+    }
+  }
+
+  setupHooks() {
+    const invalidPlugin = () => {
+      this.socketServer.sockWrite('invalid');
+    };
+
+    const addHooks = compiler => {
+      if (compiler.name === 'server') {
+        return;
+      }
+
+      const {
+        compile,
+        invalid,
+        done
+      } = compiler.hooks;
+      compile.tap('modern-dev-server', invalidPlugin);
+      invalid.tap('modern-dev-server', invalidPlugin);
+      done.tap('modern-dev-server', stats => {
+        this.socketServer.updateStats(stats);
+        this.emit('change', stats);
+      });
+    };
+
+    if (this.compiler.compilers) {
+      this.compiler.compilers.forEach(addHooks);
+    } else {
+      addHooks(this.compiler);
+    }
+  }
+
+  setupDevMiddleware() {
+    var _config$tools, _config$tools$devServ;
+
+    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,
+      stats: false
+    }, devOptions.devMiddleware));
+    return middleware;
+  }
+
+  isClientCompiler(compiler) {
+    const {
+      target
+    } = compiler.options; // if target not contains `node`, it's a client compiler
+
+    if (target) {
+      if (Array.isArray(target)) {
+        return !target.includes('node');
+      }
+
+      return target !== 'node';
+    }
+
+    return compiler.name === 'client';
+  }
+
+}

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

@@ -31,7 +31,10 @@ export const enableRegister = (projectRoot, config // eslint-disable-next-line c
   const existTsConfigPaths = checkDep('tsconfig-paths', [projectRoot]);
 
   if (isTsProject && existTsNode && existTsConfigPaths) {
+    var _config$output;
+
     debug('use ts-node');
+    const distPath = (config === null || config === void 0 ? void 0 : (_config$output = config.output) === null || _config$output === void 0 ? void 0 : _config$output.path) || 'dist';
 
     const tsNode = require('ts-node');
 
@@ -71,7 +74,8 @@ export const enableRegister = (projectRoot, config // eslint-disable-next-line c
       project: tsconfigPath,
       // for env.d.ts, https://www.npmjs.com/package/ts-node#missing-types
       files: true,
-      transpileOnly: true
+      transpileOnly: true,
+      ignore: ['(?:^|/)node_modules/', `(?:^|/)${distPath}/bundles/`]
     });
   } else {
     debug('use @babel/register');

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

@@ -8,14 +8,12 @@ import { createServer } from 'http';
 import path from 'path';
 import { createServer as createHttpsServer } from 'https';
 import { API_DIR, SERVER_DIR, SHARED_DIR } from '@modern-js/utils';
-import webpackDevMiddleware from '@modern-js/utils/webpack-dev-middleware';
 import { createProxyHandler, ModernServer, AGGRED_DIR } from '@modern-js/prod-server';
 import { getDefaultDevOptions } from "../constants";
 import { createMockHandler } from "../dev-tools/mock";
-import SocketServer from "../dev-tools/socket-server";
-import DevServerPlugin from "../dev-tools/dev-server-plugin";
 import { enableRegister } from "../dev-tools/register";
 import Watcher, { mergeWatchOptions } from "../dev-tools/watcher";
+import DevMiddleware from "../dev-tools/dev-middleware";
 export class ModernDevServer extends ModernServer {
   constructor(options) {
     super(options); // dev server should work in pwd
@@ -24,19 +22,19 @@ export class ModernDevServer extends ModernServer {
 
     _defineProperty(this, "dev", void 0);
 
-    _defineProperty(this, "compiler", void 0);
-
-    _defineProperty(this, "socketServer", void 0);
+    _defineProperty(this, "devMiddleware", void 0);
 
     _defineProperty(this, "watcher", void 0);
 
-    _defineProperty(this, "devMiddleware", void 0);
+    this.workDir = this.pwd; // set dev server options, like webpack-dev-server
 
-    this.workDir = this.pwd; // set webpack compiler
+    this.dev = this.getDevOptions(options); // create dev middleware instance
 
-    this.compiler = options.compiler; // set dev server options, like webpack-dev-server
-
-    this.dev = this.getDevOptions(options);
+    this.devMiddleware = new DevMiddleware({
+      dev: this.dev,
+      compiler: options.compiler,
+      config: this.conf
+    });
     enableRegister(this.pwd, this.conf);
   }
 
@@ -49,15 +47,15 @@ export class ModernDevServer extends ModernServer {
   } // Complete the preparation of services
 
 
-  async onInit(runner) {
+  async onInit(runner, app) {
     var _conf$tools, _conf$tools$devServer;
 
     this.runner = runner;
     const {
       conf,
       pwd,
-      compiler,
-      dev
+      dev,
+      devMiddleware
     } = this; // before dev handler
 
     const beforeHandlers = await this.setupBeforeDevMiddleware();
@@ -111,14 +109,29 @@ export class ModernDevServer extends ModernServer {
     } // do webpack build / plugin apply / socket server when pass compiler instance
 
 
-    if (compiler) {
-      // init socket server
-      this.socketServer = new SocketServer(dev); // setup compiler in server, also add dev-middleware to handler static file in memory
-
-      const devMiddlewareHandler = this.setupCompiler(compiler);
-      this.addHandler(devMiddlewareHandler);
-    } // after dev handler
+    devMiddleware.init(app);
+    devMiddleware.on('change', stats => {
+      // Reset only when client compile done
+      if (stats.toJson({
+        all: false
+      }).name === 'client') {
+        this.onRepack({
+          routes: this.getRoutes()
+        });
+      }
+    });
+    this.addHandler((ctx, next) => {
+      const {
+        req,
+        res
+      } = ctx;
 
+      if (devMiddleware.middleware) {
+        devMiddleware.middleware(req, res, next);
+      } else {
+        next();
+      }
+    }); // after dev handler
 
     const afterHandlers = await this.setupAfterDevMiddleware();
     afterHandlers.forEach(handler => {
@@ -130,28 +143,16 @@ export class ModernDevServer extends ModernServer {
         return handler(req, res, next);
       });
     });
-    await super.onInit(runner); // watch mock/ server/ api/ dir file change
+    await super.onInit(runner, app); // watch mock/ server/ api/ dir file change
 
     if (dev.watch) {
       this.startWatcher();
-    }
-  }
-
-  async onClose() {
-    var _this$watcher, _this$socketServer;
+      app.on('close', async () => {
+        var _this$watcher;
 
-    await super.onClose();
-    await ((_this$watcher = this.watcher) === null || _this$watcher === void 0 ? void 0 : _this$watcher.close());
-    await new Promise(resolve => {
-      if (this.devMiddleware) {
-        this.devMiddleware.close(() => {
-          resolve();
-        });
-      } else {
-        resolve();
-      }
-    });
-    (_this$socketServer = this.socketServer) === null || _this$socketServer === void 0 ? void 0 : _this$socketServer.close();
+        await ((_this$watcher = this.watcher) === null || _this$watcher === void 0 ? void 0 : _this$watcher.close());
+      });
+    }
   }
 
   onRepack(options = {}) {
@@ -167,12 +168,6 @@ export class ModernDevServer extends ModernServer {
     super.onRepack(options);
   }
 
-  onListening(app) {
-    var _this$socketServer2;
-
-    (_this$socketServer2 = this.socketServer) === null || _this$socketServer2 === void 0 ? void 0 : _this$socketServer2.prepare(app);
-  }
-
   async createHTTPServer(handler) {
     const {
       dev
@@ -230,104 +225,12 @@ export class ModernDevServer extends ModernServer {
         this.logger.error(e);
       }
     }
-  } // set up plugin to each compiler
-  // register hooks for each compilation, update socket stats if recompiled
-  // start dev middleware
-
-
-  setupCompiler(compiler) {
-    this.setupDevServerPlugin(compiler);
-    this.setupHooks();
-    return this.setupDevMiddleware(compiler);
   }
 
-  isClientCompiler(compiler) {
-    const {
-      target
-    } = compiler.options; // if target not contains `node`, it's a client compiler
-
-    if (target) {
-      if (Array.isArray(target)) {
-        return !target.includes('node');
-      }
-
-      return target !== 'node';
-    }
-
-    return compiler.name === 'client';
-  }
-
-  setupDevServerPlugin(compiler) {
-    const {
-      dev: devConf
-    } = this; // apply dev server to client compiler, add hmr client to entry.
-
-    if (compiler.compilers) {
-      compiler.compilers.forEach(target => {
-        if (this.isClientCompiler(target)) {
-          new DevServerPlugin(devConf).apply(target);
-        }
-      });
-    } else {
-      new DevServerPlugin(devConf).apply(compiler);
-    }
-  }
-
-  setupHooks() {
-    const invalidPlugin = () => {
-      this.socketServer.sockWrite('invalid');
-    };
-
-    const addHooks = compiler => {
-      if (compiler.name === 'server') {
-        return;
-      }
-
-      const {
-        compile,
-        invalid,
-        done
-      } = compiler.hooks;
-      compile.tap('modern-dev-server', invalidPlugin);
-      invalid.tap('modern-dev-server', invalidPlugin);
-      done.tap('modern-dev-server', stats => {
-        this.socketServer.updateStats(stats); // Reset only when client compile done
-
-        if (stats.toJson({
-          all: false
-        }).name === 'client') {
-          this.onRepack({
-            routes: this.getRoutes()
-          });
-        }
-      });
-    };
-
-    if (this.compiler.compilers) {
-      this.compiler.compilers.forEach(addHooks);
-    } else {
-      addHooks(this.compiler);
-    }
-  }
-
-  setupDevMiddleware(compiler) {
-    var _conf$tools2, _conf$tools2$devServe;
-
-    const {
-      conf
-    } = this;
-    this.devMiddleware = webpackDevMiddleware(compiler, _objectSpread({
-      headers: (_conf$tools2 = conf.tools) === null || _conf$tools2 === void 0 ? void 0 : (_conf$tools2$devServe = _conf$tools2.devServer) === null || _conf$tools2$devServe === void 0 ? void 0 : _conf$tools2$devServe.headers,
-      publicPath: '/',
-      stats: false
-    }, this.dev.devMiddleware));
-    return (ctx, next) => {
-      const {
-        req,
-        res
-      } = ctx;
-      this.devMiddleware(req, res, next);
-    };
+  createContext(req, res) {
+    return super.createContext(req, res, {
+      etag: true
+    });
   }
 
   async setupBeforeDevMiddleware() {

package/dist/js/modern/server/index.js

@@ -1,15 +1,8 @@
 import { Server } from '@modern-js/prod-server';
 import { ModernDevServer } from "./dev-server";
-import { ModernAPIDevServer, ModernSSRDevServer } from "./dev-server-split";
 
 const createDevServer = options => {
-  if (options.apiOnly) {
-    return new ModernAPIDevServer(options);
-  } else if (options.ssrOnly) {
-    return new ModernSSRDevServer(options);
-  } else {
-    return new ModernDevServer(options);
-  }
+  return new ModernDevServer(options);
 };
 
 export class DevServer extends Server {

package/dist/js/node/dev-tools/{dev-server-plugin.js → dev-middleware/dev-server-plugin.js}

@@ -21,7 +21,7 @@ class DevServerPlugin {
     const host = client.host ? `&host=${client.host}` : '';
     const path = client.path ? `&path=${client.path}` : '';
     const port = client.port ? `&port=${client.port}` : '';
-    const clientEntry = `${require.resolve("../hmr-client")}?${host}${path}${port}`; // use a hook to add entries if available
+    const clientEntry = `${require.resolve("./hmr-client")}?${host}${path}${port}`; // use a hook to add entries if available
 
     new compiler.webpack.EntryPlugin(compiler.context, clientEntry, {
       name: undefined

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

@@ -0,0 +1,152 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _events = require("events");
+
+var _webpackDevMiddleware = _interopRequireDefault(require("@modern-js/utils/webpack-dev-middleware"));
+
+var _devServerPlugin = _interopRequireDefault(require("./dev-server-plugin"));
+
+var _socketServer = _interopRequireDefault(require("./socket-server"));
+
+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; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+const noop = () => {// noop
+};
+
+class DevMiddleware extends _events.EventEmitter {
+  constructor({
+    compiler,
+    dev,
+    config
+  }) {
+    super();
+
+    _defineProperty(this, "middleware", void 0);
+
+    _defineProperty(this, "compiler", void 0);
+
+    _defineProperty(this, "devOptions", void 0);
+
+    _defineProperty(this, "socketServer", void 0);
+
+    _defineProperty(this, "config", void 0);
+
+    this.compiler = compiler;
+    this.devOptions = dev;
+    this.config = config; // init socket server
+
+    this.socketServer = new _socketServer.default(dev); // Todo: should remove after abstract dev middleware
+
+    if (this.compiler) {
+      // setup compiler in server, also add dev-middleware to handler static file in memory
+      // set up plugin to each compiler
+      this.setupDevServerPlugin(); // register hooks for each compilation, update socket stats if recompiled
+
+      this.setupHooks(); // start dev middleware
+
+      this.middleware = this.setupDevMiddleware();
+    }
+  }
+
+  init(app) {
+    app.on('listening', () => {
+      this.socketServer.prepare(app);
+    });
+    app.on('close', async () => {
+      var _this$middleware;
+
+      (_this$middleware = this.middleware) === null || _this$middleware === void 0 ? void 0 : _this$middleware.close(noop);
+      this.socketServer.close();
+    });
+  }
+
+  setupDevServerPlugin() {
+    const {
+      devOptions
+    } = this; // apply dev server to client compiler, add hmr client to entry.
+
+    if (this.compiler.compilers) {
+      this.compiler.compilers.forEach(target => {
+        if (this.isClientCompiler(target)) {
+          new _devServerPlugin.default(devOptions).apply(target);
+        }
+      });
+    } else {
+      new _devServerPlugin.default(devOptions).apply(this.compiler);
+    }
+  }
+
+  setupHooks() {
+    const invalidPlugin = () => {
+      this.socketServer.sockWrite('invalid');
+    };
+
+    const addHooks = compiler => {
+      if (compiler.name === 'server') {
+        return;
+      }
+
+      const {
+        compile,
+        invalid,
+        done
+      } = compiler.hooks;
+      compile.tap('modern-dev-server', invalidPlugin);
+      invalid.tap('modern-dev-server', invalidPlugin);
+      done.tap('modern-dev-server', stats => {
+        this.socketServer.updateStats(stats);
+        this.emit('change', stats);
+      });
+    };
+
+    if (this.compiler.compilers) {
+      this.compiler.compilers.forEach(addHooks);
+    } else {
+      addHooks(this.compiler);
+    }
+  }
+
+  setupDevMiddleware() {
+    var _config$tools, _config$tools$devServ;
+
+    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,
+      stats: false
+    }, devOptions.devMiddleware));
+    return middleware;
+  }
+
+  isClientCompiler(compiler) {
+    const {
+      target
+    } = compiler.options; // if target not contains `node`, it's a client compiler
+
+    if (target) {
+      if (Array.isArray(target)) {
+        return !target.includes('node');
+      }
+
+      return target !== 'node';
+    }
+
+    return compiler.name === 'client';
+  }
+
+}
+
+exports.default = DevMiddleware;

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

@@ -46,7 +46,10 @@ const enableRegister = (projectRoot, config // eslint-disable-next-line consiste
   const existTsConfigPaths = checkDep('tsconfig-paths', [projectRoot]);
 
   if (isTsProject && existTsNode && existTsConfigPaths) {
+    var _config$output;
+
     debug('use ts-node');
+    const distPath = (config === null || config === void 0 ? void 0 : (_config$output = config.output) === null || _config$output === void 0 ? void 0 : _config$output.path) || 'dist';
 
     const tsNode = require('ts-node');
 
@@ -86,7 +89,8 @@ const enableRegister = (projectRoot, config // eslint-disable-next-line consiste
       project: tsconfigPath,
       // for env.d.ts, https://www.npmjs.com/package/ts-node#missing-types
       files: true,
-      transpileOnly: true
+      transpileOnly: true,
+      ignore: ['(?:^|/)node_modules/', `(?:^|/)${distPath}/bundles/`]
     });
   } else {
     debug('use @babel/register');

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

@@ -13,22 +13,18 @@ var _https = require("https");
 
 var _utils = require("@modern-js/utils");
 
-var _webpackDevMiddleware = _interopRequireDefault(require("@modern-js/utils/webpack-dev-middleware"));
-
 var _prodServer = require("@modern-js/prod-server");
 
 var _constants = require("../constants");
 
 var _mock = require("../dev-tools/mock");
 
-var _socketServer = _interopRequireDefault(require("../dev-tools/socket-server"));
-
-var _devServerPlugin = _interopRequireDefault(require("../dev-tools/dev-server-plugin"));
-
 var _register = require("../dev-tools/register");
 
 var _watcher = _interopRequireWildcard(require("../dev-tools/watcher"));
 
+var _devMiddleware = _interopRequireDefault(require("../dev-tools/dev-middleware"));
+
 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; }
@@ -49,19 +45,19 @@ class ModernDevServer extends _prodServer.ModernServer {
 
     _defineProperty(this, "dev", void 0);
 
-    _defineProperty(this, "compiler", void 0);
-
-    _defineProperty(this, "socketServer", void 0);
+    _defineProperty(this, "devMiddleware", void 0);
 
     _defineProperty(this, "watcher", void 0);
 
-    _defineProperty(this, "devMiddleware", void 0);
-
-    this.workDir = this.pwd; // set webpack compiler
+    this.workDir = this.pwd; // set dev server options, like webpack-dev-server
 
-    this.compiler = options.compiler; // set dev server options, like webpack-dev-server
+    this.dev = this.getDevOptions(options); // create dev middleware instance
 
-    this.dev = this.getDevOptions(options);
+    this.devMiddleware = new _devMiddleware.default({
+      dev: this.dev,
+      compiler: options.compiler,
+      config: this.conf
+    });
     (0, _register.enableRegister)(this.pwd, this.conf);
   }
 
@@ -74,15 +70,15 @@ class ModernDevServer extends _prodServer.ModernServer {
   } // Complete the preparation of services
 
 
-  async onInit(runner) {
+  async onInit(runner, app) {
     var _conf$tools, _conf$tools$devServer;
 
     this.runner = runner;
     const {
       conf,
       pwd,
-      compiler,
-      dev
+      dev,
+      devMiddleware
     } = this; // before dev handler
 
     const beforeHandlers = await this.setupBeforeDevMiddleware();
@@ -136,14 +132,29 @@ class ModernDevServer extends _prodServer.ModernServer {
     } // do webpack build / plugin apply / socket server when pass compiler instance
 
 
-    if (compiler) {
-      // init socket server
-      this.socketServer = new _socketServer.default(dev); // setup compiler in server, also add dev-middleware to handler static file in memory
-
-      const devMiddlewareHandler = this.setupCompiler(compiler);
-      this.addHandler(devMiddlewareHandler);
-    } // after dev handler
+    devMiddleware.init(app);
+    devMiddleware.on('change', stats => {
+      // Reset only when client compile done
+      if (stats.toJson({
+        all: false
+      }).name === 'client') {
+        this.onRepack({
+          routes: this.getRoutes()
+        });
+      }
+    });
+    this.addHandler((ctx, next) => {
+      const {
+        req,
+        res
+      } = ctx;
 
+      if (devMiddleware.middleware) {
+        devMiddleware.middleware(req, res, next);
+      } else {
+        next();
+      }
+    }); // after dev handler
 
     const afterHandlers = await this.setupAfterDevMiddleware();
     afterHandlers.forEach(handler => {
@@ -155,28 +166,16 @@ class ModernDevServer extends _prodServer.ModernServer {
         return handler(req, res, next);
       });
     });
-    await super.onInit(runner); // watch mock/ server/ api/ dir file change
+    await super.onInit(runner, app); // watch mock/ server/ api/ dir file change
 
     if (dev.watch) {
       this.startWatcher();
-    }
-  }
+      app.on('close', async () => {
+        var _this$watcher;
 
-  async onClose() {
-    var _this$watcher, _this$socketServer;
-
-    await super.onClose();
-    await ((_this$watcher = this.watcher) === null || _this$watcher === void 0 ? void 0 : _this$watcher.close());
-    await new Promise(resolve => {
-      if (this.devMiddleware) {
-        this.devMiddleware.close(() => {
-          resolve();
-        });
-      } else {
-        resolve();
-      }
-    });
-    (_this$socketServer = this.socketServer) === null || _this$socketServer === void 0 ? void 0 : _this$socketServer.close();
+        await ((_this$watcher = this.watcher) === null || _this$watcher === void 0 ? void 0 : _this$watcher.close());
+      });
+    }
   }
 
   onRepack(options = {}) {
@@ -192,12 +191,6 @@ class ModernDevServer extends _prodServer.ModernServer {
     super.onRepack(options);
   }
 
-  onListening(app) {
-    var _this$socketServer2;
-
-    (_this$socketServer2 = this.socketServer) === null || _this$socketServer2 === void 0 ? void 0 : _this$socketServer2.prepare(app);
-  }
-
   async createHTTPServer(handler) {
     const {
       dev
@@ -257,104 +250,12 @@ class ModernDevServer extends _prodServer.ModernServer {
         this.logger.error(e);
       }
     }
-  } // set up plugin to each compiler
-  // register hooks for each compilation, update socket stats if recompiled
-  // start dev middleware
-
-
-  setupCompiler(compiler) {
-    this.setupDevServerPlugin(compiler);
-    this.setupHooks();
-    return this.setupDevMiddleware(compiler);
   }
 
-  isClientCompiler(compiler) {
-    const {
-      target
-    } = compiler.options; // if target not contains `node`, it's a client compiler
-
-    if (target) {
-      if (Array.isArray(target)) {
-        return !target.includes('node');
-      }
-
-      return target !== 'node';
-    }
-
-    return compiler.name === 'client';
-  }
-
-  setupDevServerPlugin(compiler) {
-    const {
-      dev: devConf
-    } = this; // apply dev server to client compiler, add hmr client to entry.
-
-    if (compiler.compilers) {
-      compiler.compilers.forEach(target => {
-        if (this.isClientCompiler(target)) {
-          new _devServerPlugin.default(devConf).apply(target);
-        }
-      });
-    } else {
-      new _devServerPlugin.default(devConf).apply(compiler);
-    }
-  }
-
-  setupHooks() {
-    const invalidPlugin = () => {
-      this.socketServer.sockWrite('invalid');
-    };
-
-    const addHooks = compiler => {
-      if (compiler.name === 'server') {
-        return;
-      }
-
-      const {
-        compile,
-        invalid,
-        done
-      } = compiler.hooks;
-      compile.tap('modern-dev-server', invalidPlugin);
-      invalid.tap('modern-dev-server', invalidPlugin);
-      done.tap('modern-dev-server', stats => {
-        this.socketServer.updateStats(stats); // Reset only when client compile done
-
-        if (stats.toJson({
-          all: false
-        }).name === 'client') {
-          this.onRepack({
-            routes: this.getRoutes()
-          });
-        }
-      });
-    };
-
-    if (this.compiler.compilers) {
-      this.compiler.compilers.forEach(addHooks);
-    } else {
-      addHooks(this.compiler);
-    }
-  }
-
-  setupDevMiddleware(compiler) {
-    var _conf$tools2, _conf$tools2$devServe;
-
-    const {
-      conf
-    } = this;
-    this.devMiddleware = (0, _webpackDevMiddleware.default)(compiler, _objectSpread({
-      headers: (_conf$tools2 = conf.tools) === null || _conf$tools2 === void 0 ? void 0 : (_conf$tools2$devServe = _conf$tools2.devServer) === null || _conf$tools2$devServe === void 0 ? void 0 : _conf$tools2$devServe.headers,
-      publicPath: '/',
-      stats: false
-    }, this.dev.devMiddleware));
-    return (ctx, next) => {
-      const {
-        req,
-        res
-      } = ctx;
-      this.devMiddleware(req, res, next);
-    };
+  createContext(req, res) {
+    return super.createContext(req, res, {
+      etag: true
+    });
   }
 
   async setupBeforeDevMiddleware() {

package/dist/js/node/server/index.js

@@ -9,16 +9,8 @@ var _prodServer = require("@modern-js/prod-server");
 
 var _devServer = require("./dev-server");
 
-var _devServerSplit = require("./dev-server-split");
-
 const createDevServer = options => {
-  if (options.apiOnly) {
-    return new _devServerSplit.ModernAPIDevServer(options);
-  } else if (options.ssrOnly) {
-    return new _devServerSplit.ModernSSRDevServer(options);
-  } else {
-    return new _devServer.ModernDevServer(options);
-  }
+  return new _devServer.ModernDevServer(options);
 };
 
 class DevServer extends _prodServer.Server {

package/dist/types/dev-tools/{dev-server-plugin.d.ts → dev-middleware/dev-server-plugin.d.ts}

@@ -1,5 +1,5 @@
 import type webpack from 'webpack';
-import type { DevServerOptions } from '../types';
+import type { DevServerOptions } from '../../types';
 export default class DevServerPlugin {
   private readonly options;
   constructor(options: DevServerOptions);

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

@@ -0,0 +1,31 @@
+/// <reference types="node" />
+/// <reference types="node" />
+import { Server, IncomingMessage, ServerResponse } 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';
+declare type Options = {
+  compiler: MultiCompiler | Compiler | null;
+  dev: DevServerOptions;
+  config: NormalizedConfig;
+};
+export default class DevMiddleware extends EventEmitter {
+  middleware?: webpackDevMiddleware.API<IncomingMessage, ServerResponse>;
+  private compiler;
+  private devOptions;
+  private socketServer;
+  private config;
+  constructor({
+    compiler,
+    dev,
+    config
+  }: Options);
+  init(app: Server): void;
+  private setupDevServerPlugin;
+  private setupHooks;
+  private setupDevMiddleware;
+  private isClientCompiler;
+}
+export {};

package/dist/types/dev-tools/{socket-server.d.ts → dev-middleware/socket-server.d.ts}

@@ -2,7 +2,7 @@
 import { Server } from 'http';
 import ws from 'ws';
 import type webpack from 'webpack';
-import type { DevServerOptions } from '../types';
+import type { DevServerOptions } from '../../types';
 export default class SocketServer {
   private wsServer;
   private readonly sockets;

package/dist/types/dev-tools/mock/getMockData.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="node" />
 import { IncomingMessage, ServerResponse } from 'http';
-import { ModernServerContext, NextFunction } from '@modern-js/types';
+import type { ModernServerContext, NextFunction } from '@modern-js/types';
 export declare type MockConfig = Record<string, {
   data: any;
 } | ((req: IncomingMessage, res: ServerResponse, next: NextFunction) => Promise<void>)>;

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

@@ -1,4 +1,4 @@
-import { ModernServerContext, NextFunction } from '@modern-js/types';
+import type { ModernServerContext, NextFunction } from '@modern-js/types';
 export declare const createMockHandler: ({
   pwd
 }: {

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

@@ -1,23 +1,19 @@
 /// <reference types="node" />
 /// <reference types="node" />
-import http, { Server, IncomingMessage, ServerResponse } from 'http';
+import { IncomingMessage, Server, ServerResponse } from 'http';
 import { ServerHookRunner, ModernServer, BuildOptions } from '@modern-js/prod-server';
 import { WatchEvent } from '../dev-tools/watcher';
-import { ModernDevServerOptions } from '../types';
+import type { ModernDevServerOptions } from '../types';
 export declare class ModernDevServer extends ModernServer {
   private mockHandler;
   private readonly dev;
-  private readonly compiler?;
-  private socketServer;
+  private readonly devMiddleware;
   private watcher?;
-  private devMiddleware;
   constructor(options: ModernDevServerOptions);
   private getDevOptions;
-  onInit(runner: ServerHookRunner): Promise<void>;
-  onClose(): Promise<void>;
+  onInit(runner: ServerHookRunner, app: Server): Promise<void>;
   onRepack(options?: BuildOptions): void;
-  onListening(app: Server): void;
-  createHTTPServer(handler: (req: IncomingMessage, res: ServerResponse, next?: () => void) => void): Promise<http.Server | import("https").Server>;
+  createHTTPServer(handler: (req: IncomingMessage, res: ServerResponse, next?: () => void) => void): Promise<Server | import("https").Server>;
   protected warmupSSRBundle(): void;
   protected onServerChange({
     filepath,
@@ -26,11 +22,7 @@ export declare class ModernDevServer extends ModernServer {
     filepath: string;
     event: WatchEvent;
   }): void;
-  private setupCompiler;
-  private isClientCompiler;
-  private setupDevServerPlugin;
-  private setupHooks;
-  private setupDevMiddleware;
+  protected createContext(req: IncomingMessage, res: ServerResponse): import("@modern-js/prod-server/src/libs/context").ModernServerContext;
   private setupBeforeDevMiddleware;
   private setupAfterDevMiddleware;
   private cleanSSRCache;

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

@@ -1,5 +1,5 @@
 import { Server } from '@modern-js/prod-server';
-import { ModernDevServerOptions } from '../types';
+import type { ModernDevServerOptions } from '../types';
 export declare class DevServer extends Server {
   constructor(options: ModernDevServerOptions);
 }

package/dist/types/types.d.ts

@@ -23,7 +23,7 @@ export declare type DevServerOptions = {
   [propName: string]: any;
 };
 export declare type ExtraOptions = {
-  dev?: boolean | Partial<DevServerOptions>;
-  compiler?: webpack.MultiCompiler | webpack.Compiler | null;
+  dev: boolean | Partial<DevServerOptions>;
+  compiler: webpack.MultiCompiler | webpack.Compiler | null;
 };
 export declare type ModernDevServerOptions = ModernServerOptions & ExtraOptions;

package/package.json

@@ -11,7 +11,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "1.18.0",
+  "version": "1.18.1-alpha.0",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/types/index.d.ts",
   "main": "./dist/js/node/index.js",
@@ -30,20 +30,20 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@babel/register": "^7.17.7",
-    "@modern-js/prod-server": "1.18.0",
-    "@modern-js/server-utils": "1.18.0",
-    "@modern-js/utils": "1.18.0",
+    "@modern-js/prod-server": "1.18.1-alpha.0",
+    "@modern-js/server-utils": "1.18.1-alpha.0",
+    "@modern-js/utils": "1.18.1-alpha.0",
     "devcert": "^1.2.2",
     "minimatch": "^3.0.4",
     "path-to-regexp": "^6.2.0",
     "ws": "^8.2.0"
   },
   "devDependencies": {
-    "@modern-js/core": "1.18.0",
-    "@modern-js/server-core": "1.18.0",
-    "@modern-js/types": "1.18.0",
-    "@scripts/build": "1.18.0",
-    "@scripts/jest-config": "1.18.0",
+    "@modern-js/core": "1.18.1-alpha.0",
+    "@modern-js/server-core": "1.18.1-alpha.0",
+    "@modern-js/types": "1.18.1-alpha.0",
+    "@scripts/build": "1.18.1-alpha.0",
+    "@scripts/jest-config": "1.18.1-alpha.0",
     "@types/jest": "^27",
     "@types/minimatch": "^3.0.5",
     "@types/node": "^14",

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

@@ -1,43 +0,0 @@
-import { RUN_MODE } from '@modern-js/prod-server';
-import { ModernDevServer } from "./dev-server";
-export class ModernSSRDevServer extends ModernDevServer {
-  prepareAPIHandler(_) {
-    return null;
-  }
-
-  filterRoutes(routes) {
-    return routes.filter(route => route.isSSR);
-  }
-
-  async setupBeforeProdMiddleware() {
-    if (this.runMode === RUN_MODE.FULL) {
-      await super.setupBeforeProdMiddleware();
-    }
-  }
-
-  async emitRouteHook(_, _input) {
-    if (this.runMode === RUN_MODE.FULL) {
-      await super.emitRouteHook(_, _input);
-    }
-  }
-
-}
-export class ModernAPIDevServer extends ModernDevServer {
-  prepareWebHandler(_) {
-    return null;
-  }
-
-  filterRoutes(routes) {
-    return routes.filter(route => route.isApi);
-  }
-
-  async setupBeforeProdMiddleware() {
-    if (this.runMode === RUN_MODE.FULL) {
-      await super.setupBeforeProdMiddleware();
-    }
-  }
-
-  async emitRouteHook(_, _input) {// empty
-  }
-
-}

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

@@ -1,57 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ModernSSRDevServer = exports.ModernAPIDevServer = void 0;
-
-var _prodServer = require("@modern-js/prod-server");
-
-var _devServer = require("./dev-server");
-
-class ModernSSRDevServer extends _devServer.ModernDevServer {
-  prepareAPIHandler(_) {
-    return null;
-  }
-
-  filterRoutes(routes) {
-    return routes.filter(route => route.isSSR);
-  }
-
-  async setupBeforeProdMiddleware() {
-    if (this.runMode === _prodServer.RUN_MODE.FULL) {
-      await super.setupBeforeProdMiddleware();
-    }
-  }
-
-  async emitRouteHook(_, _input) {
-    if (this.runMode === _prodServer.RUN_MODE.FULL) {
-      await super.emitRouteHook(_, _input);
-    }
-  }
-
-}
-
-exports.ModernSSRDevServer = ModernSSRDevServer;
-
-class ModernAPIDevServer extends _devServer.ModernDevServer {
-  prepareWebHandler(_) {
-    return null;
-  }
-
-  filterRoutes(routes) {
-    return routes.filter(route => route.isApi);
-  }
-
-  async setupBeforeProdMiddleware() {
-    if (this.runMode === _prodServer.RUN_MODE.FULL) {
-      await super.setupBeforeProdMiddleware();
-    }
-  }
-
-  async emitRouteHook(_, _input) {// empty
-  }
-
-}
-
-exports.ModernAPIDevServer = ModernAPIDevServer;

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

@@ -1,16 +0,0 @@
-import type { APIServerStartInput } from '@modern-js/server-core';
-import { ServerRoute as ModernRouteInterface } from '@modern-js/types';
-import { HookNames } from '@modern-js/prod-server';
-import { ModernDevServer } from './dev-server';
-export declare class ModernSSRDevServer extends ModernDevServer {
-  protected prepareAPIHandler(_: APIServerStartInput['config']): any;
-  protected filterRoutes(routes: ModernRouteInterface[]): ModernRouteInterface[];
-  protected setupBeforeProdMiddleware(): Promise<void>;
-  protected emitRouteHook(_: HookNames, _input: any): Promise<void>;
-}
-export declare class ModernAPIDevServer extends ModernDevServer {
-  protected prepareWebHandler(_: APIServerStartInput['config']): any;
-  protected filterRoutes(routes: ModernRouteInterface[]): ModernRouteInterface[];
-  protected setupBeforeProdMiddleware(): Promise<void>;
-  protected emitRouteHook(_: HookNames, _input: any): Promise<void>;
-}