@modern-js/prod-server 1.0.1

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

@@ -0,0 +1,576 @@
+const _excluded = ["getMiddlewares"];
+
+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; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+/* eslint-disable max-lines */
+import { createServer } from 'http';
+import util from 'util';
+import path from 'path';
+import { fs, ROUTE_SPEC_FILE } from '@modern-js/utils';
+import mime from 'mime-types';
+import axios from 'axios';
+import clone from 'lodash.clone';
+import { RouteMatchManager } from "../libs/route";
+import { createRenderHandler } from "../libs/render";
+import { createStaticFileHandler } from "../libs/serve-file";
+import { createErrorDocument, createMiddlewareCollecter, getStaticReg, mergeExtension, noop } from "../utils";
+import * as reader from "../libs/render/reader";
+import { createProxyHandler } from "../libs/proxy";
+import { createContext } from "../libs/context";
+import { AGGRED_DIR, ApiServerMode, ERROR_DIGEST, ERROR_PAGE_TEXT } from "../constants";
+import { createTemplateAPI } from "../libs/hook-api/template";
+import { createRouteAPI } from "../libs/hook-api/route";
+const API_DIR = './api';
+const SERVER_DIR = './server';
+export class ModernServer {
+  // appDirectory
+  // product dist dir
+  // work on src or dist
+  constructor({
+    pwd,
+    config,
+    routes,
+    staticGenerate,
+    logger,
+    metrics,
+    proxyTarget
+  }) {
+    var _config$output;
+
+    this.pwd = void 0;
+    this.distDir = void 0;
+    this.workDir = void 0;
+    this.router = void 0;
+    this.conf = void 0;
+    this.handlers = [];
+    this.presetRoutes = void 0;
+    this.runner = void 0;
+    this.logger = void 0;
+    this.metrics = void 0;
+    this.reader = reader;
+    this.proxyTarget = void 0;
+    this.staticFileHandler = void 0;
+    this.routeRenderHandler = void 0;
+    this.frameWebHandler = null;
+    this.frameAPIHandler = null;
+    this.proxyHandler = null;
+    this._handler = void 0;
+    this.staticGenerate = false;
+
+    require('ignore-styles');
+
+    this.pwd = pwd;
+    this.distDir = path.join(pwd, ((_config$output = config.output) === null || _config$output === void 0 ? void 0 : _config$output.path) || 'dist');
+    this.workDir = this.distDir;
+    this.conf = config;
+    this.logger = logger;
+    this.metrics = metrics;
+    this.router = new RouteMatchManager();
+    this.presetRoutes = routes;
+    this.proxyTarget = proxyTarget;
+
+    if (staticGenerate) {
+      this.staticGenerate = staticGenerate;
+    }
+
+    process.env.BUILD_TYPE = `${this.staticGenerate ? 'ssg' : 'ssr'}`;
+  } // exposed requestHandler
+
+
+  getRequestHandler() {
+    return this.requestHandler.bind(this);
+  } // server prepare
+
+
+  async init(runner) {
+    var _conf$bff;
+
+    this.runner = runner;
+    const {
+      distDir,
+      staticGenerate,
+      conf
+    } = this;
+    this.addHandler((ctx, next) => {
+      ctx.res.setHeader('Access-Control-Allow-Origin', '*');
+      ctx.res.setHeader('Access-Control-Allow-Credentials', 'false');
+      next();
+    }); // proxy handler, each proxy has own handler
+
+    this.proxyHandler = createProxyHandler((_conf$bff = conf.bff) === null || _conf$bff === void 0 ? void 0 : _conf$bff.proxy);
+
+    if (this.proxyHandler) {
+      this.proxyHandler.forEach(handler => {
+        this.addHandler(handler);
+      });
+    } // start reader, include an time interval
+
+
+    this.reader.init(); // use preset routes priority
+
+    this.router.reset(this.filterRoutes(this.presetRoutes || this.readRouteSpec()));
+    this.warmupSSRBundle();
+    await this.prepareFrameHandler(); // Only work when without setting `assetPrefix`.
+    // Setting `assetPrefix` means these resources should be uploaded to CDN.
+
+    const staticPathRegExp = getStaticReg(this.conf.output || {});
+    this.staticFileHandler = createStaticFileHandler([{
+      path: staticPathRegExp,
+      target: distDir
+    }]);
+    this.routeRenderHandler = createRenderHandler({
+      distDir,
+      staticGenerate
+    });
+    await this.preServerInit();
+    this.addHandler(this.staticFileHandler);
+    this.addHandler(this.routeHandler.bind(this));
+    this.compose();
+  } // server ready
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+
+  ready(_) {} // invoke when http server listen
+
+
+  onListening(_) {// empty
+  } // close any thing run in server
+
+
+  async close() {
+    this.reader.close();
+  }
+
+  async createHTTPServer(handler) {
+    return createServer(handler);
+  } // read route spec from route.json
+
+
+  readRouteSpec() {
+    const file = path.join(this.distDir, ROUTE_SPEC_FILE);
+
+    if (fs.existsSync(file)) {
+      const content = fs.readJSONSync(file);
+      return content.routes;
+    }
+
+    return [];
+  } // add promisify request handler to server
+  // handler should do not do more things after invoke next
+
+
+  addHandler(handler) {
+    if (handler[Symbol.toStringTag] === 'AsyncFunction') {
+      this.handlers.push(handler);
+    } else {
+      this.handlers.push(util.promisify(handler));
+    }
+  } // return 404 page
+
+
+  render404(context) {
+    context.error(ERROR_DIGEST.ENOTF);
+    this.renderErrorPage(context, 404);
+  } // gather frame extension and get framework handler
+
+
+  async prepareFrameHandler() {
+    const {
+      workDir,
+      runner
+    } = this; // server hook, gather plugin inject
+
+    const _createMiddlewareColl = createMiddlewareCollecter(),
+          {
+      getMiddlewares
+    } = _createMiddlewareColl,
+          collector = _objectWithoutProperties(_createMiddlewareColl, _excluded);
+
+    await runner.gather(collector);
+    const {
+      api: pluginAPIExt,
+      web: pluginWebExt
+    } = getMiddlewares();
+    const apiDir = path.join(workDir, API_DIR);
+    const serverDir = path.join(workDir, SERVER_DIR); // get api or web server handler from server-framework plugin
+
+    if (await fs.pathExists(path.join(serverDir))) {
+      const webExtension = mergeExtension(pluginWebExt);
+      this.frameWebHandler = await this.prepareWebHandler(webExtension);
+    }
+
+    if (fs.existsSync(apiDir)) {
+      const mode = fs.existsSync(path.join(apiDir, AGGRED_DIR.lambda)) ? ApiServerMode.frame : ApiServerMode.func; // if use lambda/, mean framework style of writing, then discard user extension
+
+      const apiExtension = mergeExtension(pluginAPIExt);
+      this.frameAPIHandler = await this.prepareAPIHandler(mode, apiExtension);
+    }
+  } // Todo
+
+
+  async proxy() {
+    return null;
+  }
+  /* —————————————————————— function will be overwrite —————————————————————— */
+
+
+  async prepareWebHandler(extension) {
+    const {
+      workDir,
+      runner
+    } = this;
+    return runner.prepareWebServer({
+      pwd: workDir,
+      config: extension
+    }, {
+      onLast: () => null
+    });
+  }
+
+  async prepareAPIHandler(mode, extension) {
+    const {
+      workDir,
+      runner,
+      conf
+    } = this;
+    const {
+      bff
+    } = conf;
+    const prefix = (bff === null || bff === void 0 ? void 0 : bff.prefix) || '/api';
+    return runner.prepareApiServer({
+      pwd: workDir,
+      mode,
+      config: extension,
+      prefix: Array.isArray(prefix) ? prefix[0] : prefix
+    }, {
+      onLast: () => null
+    });
+  }
+
+  filterRoutes(routes) {
+    return routes;
+  }
+
+  async emitRouteHook(eventName, input) {
+    input.context = clone(input.context);
+    return this.runner[eventName](input, {
+      onLast: noop
+    });
+  } // warmup ssr function
+
+
+  warmupSSRBundle() {
+    const {
+      distDir
+    } = this;
+    const bundles = this.router.getBundles();
+    bundles.forEach(bundle => {
+      const filepath = path.join(distDir, bundle); // if error, just throw and let process die
+
+      require(filepath);
+    });
+  }
+
+  async preServerInit() {
+    const {
+      conf,
+      runner
+    } = this;
+    const preMiddleware = await runner.preServerInit(conf);
+    preMiddleware.flat().forEach(mid => {
+      this.addHandler(mid);
+    });
+  }
+
+  async handleAPI(context) {
+    const {
+      req,
+      res
+    } = context;
+
+    if (!this.frameAPIHandler) {
+      throw new Error('can not found api hanlder');
+    }
+
+    await this.frameAPIHandler(req, res);
+  }
+
+  async handleWeb(context, route) {
+    return this.routeRenderHandler({
+      ctx: context,
+      route,
+      runner: this.runner
+    });
+  }
+
+  verifyMatch(_c, _m) {// empty
+  }
+  /* —————————————————————— private function —————————————————————— */
+  // handler route.json, include api / csr / ssr
+  // eslint-disable-next-line max-statements
+
+
+  async routeHandler(context) {
+    const {
+      req,
+      res
+    } = context;
+    await this.emitRouteHook('beforeMatch', {
+      context
+    }); // match routes in the route spec
+
+    const matched = this.router.match(context.path);
+
+    if (!matched) {
+      this.render404(context);
+      return;
+    } else {
+      this.verifyMatch(context, matched);
+    }
+
+    if (res.headersSent) {
+      return;
+    }
+
+    const routeAPI = createRouteAPI(matched, this.router, context.url);
+    await this.emitRouteHook('afterMatch', {
+      context,
+      routeAPI
+    });
+
+    if (res.headersSent) {
+      return;
+    }
+
+    const {
+      current
+    } = routeAPI;
+    const route = current.generate(context.url);
+    context.setParams(route.params);
+    context.setServerData('router', {
+      baseUrl: route.urlPath,
+      params: route.params
+    }); // route is api service
+
+    if (route.isApi) {
+      await this.handleAPI(context);
+      return;
+    }
+
+    if (this.frameWebHandler) {
+      await this.frameWebHandler(req, res);
+    } // frameWebHandler has process request
+
+
+    if (res.headersSent) {
+      return;
+    }
+
+    if (route.entryName) {
+      await this.emitRouteHook('beforeRender', {
+        context
+      });
+    }
+
+    const file = await this.handleWeb(context, route);
+
+    if (!file) {
+      this.render404(context);
+      return;
+    }
+
+    if (file.redirect) {
+      res.statusCode = file.statusCode;
+      res.setHeader('Location', file.content);
+      res.end();
+      return;
+    }
+
+    let response = file.content;
+
+    if (route.entryName) {
+      const templateAPI = createTemplateAPI(file.content.toString());
+      await this.emitRouteHook('afterRender', {
+        context,
+        templateAPI
+      });
+      await this.injectMicroFE(context, templateAPI);
+      templateAPI.appendHead(`<script>window._SERVER_DATA=${JSON.stringify(context.serverData)}</script>`);
+      response = templateAPI.get();
+    }
+
+    res.setHeader('content-type', file.contentType);
+    res.end(response);
+  } // eslint-disable-next-line max-statements
+
+
+  async injectMicroFE(context, templateAPI) {
+    var _conf$runtime, _conf$server;
+
+    const {
+      conf
+    } = this;
+    const masterApp = (_conf$runtime = conf.runtime) === null || _conf$runtime === void 0 ? void 0 : _conf$runtime.masterApp; // no inject if not master App
+
+    if (!masterApp) {
+      return;
+    }
+
+    const manifest = masterApp.manifest || {};
+    let modules = [];
+    const {
+      modules: configModules = []
+    } = manifest; // while config modules is an string, fetch data from remote
+
+    if (typeof configModules === 'string') {
+      const moduleRequestUrl = configModules;
+
+      try {
+        const {
+          data: remoteModules
+        } = await axios.get(moduleRequestUrl);
+
+        if (Array.isArray(remoteModules)) {
+          modules.push(...remoteModules);
+        }
+      } catch (e) {
+        context.error(ERROR_DIGEST.EMICROINJ, e);
+      }
+    } else if (Array.isArray(configModules)) {
+      modules.push(...configModules);
+    }
+
+    const {
+      headers
+    } = context.req;
+    const debugName = headers['x-micro-frontend-module-name'] || context.query['__debug__micro-frontend-module-name'];
+    const debugEntry = headers['x-micro-frontend-module-entry'] || context.query['__debug__micro-frontend-module-entry']; // add debug micro App to first
+
+    if (debugName && debugEntry && (_conf$server = conf.server) !== null && _conf$server !== void 0 && _conf$server.enableMicroFrontendDebug) {
+      modules = modules.map(m => {
+        if (m.name === debugName) {
+          return {
+            name: debugName,
+            entry: debugEntry
+          };
+        }
+
+        return m;
+      });
+    }
+
+    try {
+      // Todo Safety xss
+      const injection = JSON.stringify(_objectSpread(_objectSpread({}, manifest), {}, {
+        modules
+      }));
+      templateAPI.appendHead(`<script>window.modern_manifest=${injection}</script>`);
+    } catch (e) {
+      context.error(ERROR_DIGEST.EMICROINJ, e);
+    }
+  } // compose handlers and create the final handler
+
+
+  compose() {
+    const {
+      handlers
+    } = this;
+
+    if (!Array.isArray(handlers)) {
+      throw new TypeError('Middleware stack must be an array!');
+    }
+
+    for (const fn of handlers) {
+      if (typeof fn !== 'function') {
+        throw new TypeError('Middleware must be composed of functions!');
+      }
+    }
+
+    this._handler = (context, next) => {
+      let i = 0;
+
+      const dispatch = () => {
+        const handler = handlers[i++];
+
+        if (!handler) {
+          return next();
+        } // eslint-disable-next-line promise/prefer-await-to-then
+
+
+        return handler(context, dispatch).catch(onError);
+      };
+
+      const onError = err => {
+        this.onError(context, err);
+      };
+
+      return dispatch();
+    };
+  }
+
+  requestHandler(req, res, next = () => {// empty
+  }) {
+    res.statusCode = 200;
+    req.logger = req.logger || this.logger;
+    req.metrics = req.metrics || this.metrics;
+    const context = createContext(req, res);
+
+    try {
+      this._handler(context, next);
+    } catch (err) {
+      this.onError(context, err);
+    }
+  }
+
+  onError(context, err) {
+    context.error(ERROR_DIGEST.EINTER, err);
+    this.renderErrorPage(context, 500);
+  }
+
+  async renderErrorPage(context, status) {
+    const {
+      res
+    } = context;
+    context.status = status;
+    res.setHeader('content-type', mime.contentType('html'));
+    const statusPage = `/${status}`;
+    const customErrorPage = `/_error`;
+    const matched = this.router.match(statusPage) || this.router.match(customErrorPage); // if no custom status page find
+
+    if (matched) {
+      const route = matched.generate(context.url);
+      const {
+        entryName
+      } = route; // check entryName, aviod matched '/' route
+
+      if (entryName === status.toString() || entryName === '_error') {
+        try {
+          const file = await this.routeRenderHandler({
+            route,
+            ctx: context,
+            runner: this.runner
+          });
+
+          if (file) {
+            context.res.end(file.content);
+            return;
+          }
+        } catch (e) {// just catch error when the rendering error occurred in the custom error page.
+        }
+      }
+    }
+
+    const text = ERROR_PAGE_TEXT[status] || ERROR_PAGE_TEXT[500];
+    res.end(createErrorDocument(status, text));
+  }
+
+}
+/* eslint-enable max-lines */

package/dist/js/modern/type.js

@@ -0,0 +1 @@
+export {};

package/dist/js/modern/utils.js

@@ -0,0 +1,112 @@
+import { compile } from 'path-to-regexp';
+export const mergeExtension = users => {
+  const output = [];
+  return {
+    middleware: output.concat(users)
+  };
+};
+export const toMessage = (dig, e) => {
+  const message = e instanceof Error ? e.message : e;
+
+  if (message) {
+    return `${dig}: ${message}`;
+  } else {
+    return dig;
+  }
+};
+export const noop = () => {// noop
+};
+export const createErrorDocument = (status, text) => {
+  const title = `${status}: ${text}`;
+  return `<!DOCTYPE html>
+  <html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>${title}</title>
+    <style>
+      html,body {
+        margin: 0;
+      }
+
+      .page-container {
+        color: #000;
+        background: #fff;
+        height: 100vh;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="page-container">
+    <h1>${status}</h1>
+    <div>${text}</div>
+  </body>
+  </html>
+  `;
+};
+export const createMiddlewareCollecter = () => {
+  const webMiddlewares = [];
+  const apiMiddlewares = [];
+
+  const addWebMiddleware = input => {
+    webMiddlewares.push(input);
+  };
+
+  const addAPIMiddleware = input => {
+    apiMiddlewares.push(input);
+  };
+
+  const getMiddlewares = () => ({
+    web: webMiddlewares,
+    api: apiMiddlewares
+  });
+
+  return {
+    getMiddlewares,
+    addWebMiddleware,
+    addAPIMiddleware
+  };
+};
+export const toPath = (reg, params) => {
+  const fn = compile(reg, {
+    encode: encodeURIComponent
+  });
+  return fn(params);
+};
+export const getStaticReg = (output = {}) => {
+  const {
+    favicon,
+    faviconByEntries,
+    cssPath,
+    jsPath,
+    mediaPath
+  } = output;
+  const favicons = prepareFavicons(favicon, faviconByEntries);
+  const staticFiles = [cssPath, jsPath, mediaPath].filter(v => Boolean(v));
+  const staticPathRegExp = new RegExp(`^/(static/|upload/|favicon.ico|icon.png${favicons.length > 0 ? `|${favicons.join('|')}` : ''}|${staticFiles.join('|')})`);
+  return staticPathRegExp;
+};
+export const prepareFavicons = (favicon, faviconByEntries) => {
+  const faviconNames = [];
+
+  if (favicon) {
+    faviconNames.push(favicon.substring(favicon.lastIndexOf('/') + 1));
+  }
+
+  if (faviconByEntries) {
+    Object.keys(faviconByEntries).forEach(f => {
+      const curFavicon = faviconByEntries[f];
+
+      if (curFavicon) {
+        faviconNames.push(curFavicon.substring(curFavicon.lastIndexOf('/') + 1));
+      }
+    });
+  }
+
+  return faviconNames;
+};