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

package/CHANGELOG.md

@@ -1,5 +1,60 @@
 # @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
+
+- 3d5e3a5: chore: get api mode from bff core
+  chore: 从 bff core 中获取 api mode
+- 8280920: chore(server): export DevServerOptions type
+
+  chore(server): 导出 DevServerOptions 类型
+
+- 2b7406d: feat: use typescript instead of babel as typescript compiler in server
+  feat: 服务端，增加 typescript 作为 typescipt 编译器
+- fc7214d: feat(server): export DevServerHttpsOptions type
+
+  feat(server): 导出 DevServerHttpsOptions 类型
+
+- Updated dependencies [8280920]
+- Updated dependencies [3d5e3a5]
+- Updated dependencies [2b7406d]
+- Updated dependencies [0a4d622]
+- Updated dependencies [60a2e3a]
+- Updated dependencies [5227370]
+- Updated dependencies [7928bae]
+  - @modern-js/utils@1.18.0
+  - @modern-js/prod-server@1.18.0
+  - @modern-js/server-utils@1.18.0
+
 ## 1.17.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/https/index.js

@@ -1,6 +1,6 @@
 import * as devcert from 'devcert';
 export const genHttpsOptions = async userOptions => {
-  const httpsOptions = userOptions === true ? {} : userOptions;
+  const httpsOptions = typeof userOptions === 'boolean' ? {} : userOptions;
 
   if (!httpsOptions.key || !httpsOptions.cert) {
     const selfsign = await devcert.certificateFor(['localhost']);

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

@@ -0,0 +1,103 @@
+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 path from 'path';
+import { resolveBabelConfig } from '@modern-js/server-utils';
+import { fs, getAlias, createDebugger } from '@modern-js/utils';
+const debug = createDebugger('server');
+
+const checkDep = (depName, paths) => {
+  let packagePath = '';
+
+  try {
+    packagePath = require.resolve(depName, {
+      paths
+    });
+  } catch (error) {}
+
+  return Boolean(packagePath);
+};
+
+export const enableRegister = (projectRoot, config // eslint-disable-next-line consistent-return
+) => {
+  const registerDirs = ['./api', './server', './config/mock', './shared'];
+  const TS_CONFIG_FILENAME = `tsconfig.json`;
+  const tsconfigPath = path.resolve(projectRoot, TS_CONFIG_FILENAME);
+  const isTsProject = fs.existsSync(tsconfigPath);
+  const existTsNode = checkDep('ts-node', [projectRoot]);
+  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');
+
+    const tsConfigPaths = require('tsconfig-paths');
+
+    const {
+      alias
+    } = config.source;
+    const aliasOption = getAlias(alias || {}, {
+      appDirectory: projectRoot,
+      tsconfigPath
+    });
+    const {
+      paths = {},
+      absoluteBaseUrl = './'
+    } = aliasOption;
+    const tsPaths = Object.keys(paths).reduce((o, key) => {
+      let tsPath = paths[key];
+
+      if (typeof tsPath === 'string' && path.isAbsolute(tsPath)) {
+        tsPath = path.relative(absoluteBaseUrl, tsPath);
+      }
+
+      if (typeof tsPath === 'string') {
+        tsPath = [tsPath];
+      }
+
+      return _objectSpread(_objectSpread({}, o), {}, {
+        [`${key}`]: tsPath
+      });
+    }, {});
+    tsConfigPaths.register({
+      baseUrl: absoluteBaseUrl || './',
+      paths: tsPaths
+    });
+    tsNode.register({
+      project: tsconfigPath,
+      // for env.d.ts, https://www.npmjs.com/package/ts-node#missing-types
+      files: true,
+      transpileOnly: true,
+      ignore: ['(?:^|/)node_modules/', `(?:^|/)${distPath}/bundles/`]
+    });
+  } else {
+    debug('use @babel/register');
+    const babelConfig = resolveBabelConfig(projectRoot, config, {
+      tsconfigPath,
+      syntax: 'es6+',
+      type: 'commonjs'
+    });
+    return require('@babel/register')(_objectSpread(_objectSpread({}, babelConfig), {}, {
+      only: [function (filePath) {
+        // TODO: wait params
+        // FIXME: 删除hardcode，根据 AppContext 中的 metaName 设置路径
+        if (filePath.includes(`node_modules${path.sep}.modern-js`)) {
+          return true;
+        }
+
+        return registerDirs.some(registerDir => filePath.startsWith(path.join(projectRoot, registerDir)));
+      }],
+      extensions: ['.js', '.ts'],
+      babelrc: false,
+      configFile: false,
+      root: projectRoot
+    }));
+  }
+};

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/babel/register";
+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