@modern-js/server 1.18.0 → 1.18.1

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @modern-js/server
 
+## 1.18.1
+
+### Patch Changes
+
+- 318e149: fix: tools.devServer type missing some properties
+
+  fix: 修复 tools.devServer 类型定义不完整的问题
+
+- 60d95ad: fix: dev server config should be optional
+  fix: devServer 配置项应该是可选配置的
+- 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 [318e149]
+- Updated dependencies [60d95ad]
+- Updated dependencies [f6a3aa1]
+- Updated dependencies [fb02c81]
+- Updated dependencies [9f7bfa6]
+- Updated dependencies [9fcfbd4]
+- Updated dependencies [6c2c745]
+  - @modern-js/prod-server@1.18.1
+  - @modern-js/types@1.18.1
+  - @modern-js/server-utils@1.18.1
+  - @modern-js/utils@1.18.1
+
 ## 1.18.0
 
 ### Patch Changes

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

@@ -11,10 +11,10 @@ export default class DevServerPlugin {
     const {
       client
     } = this.options;
-    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 host = client !== null && client !== void 0 && client.host ? `&host=${client.host}` : '';
+    const path = client !== null && client !== void 0 && client.path ? `&path=${client.path}` : '';
+    const port = client !== null && client !== void 0 && client.port ? `&port=${client.port}` : '';
+    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/{socket-server.js → dev-middleware/socket-server.js}

@@ -21,10 +21,12 @@ export default class SocketServer {
 
 
   prepare(app) {
+    var _this$options$client;
+
     this.app = app;
     this.wsServer = new ws.Server({
       noServer: true,
-      path: this.options.client.path
+      path: (_this$options$client = this.options.client) === null || _this$options$client === void 0 ? void 0 : _this$options$client.path
     }); // listen upgrade event to handle socket
 
     this.app.on('upgrade', (req, sock, head) => {
@@ -92,6 +94,8 @@ 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', () => {
@@ -111,7 +115,7 @@ export default class SocketServer {
       }
     });
 
-    if (this.options.client.logging) {
+    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);
     }
 
@@ -123,11 +127,11 @@ export default class SocketServer {
       this.singleWrite(connection, 'liveReload');
     }
 
-    if (this.options.client.progress) {
+    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.client.overlay) {
+    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/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}

@@ -18,10 +18,10 @@ class DevServerPlugin {
     const {
       client
     } = this.options;
-    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 host = client !== null && client !== void 0 && client.host ? `&host=${client.host}` : '';
+    const path = client !== null && client !== void 0 && client.path ? `&path=${client.path}` : '';
+    const port = client !== null && client !== void 0 && client.port ? `&port=${client.port}` : '';
+    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