@modern-js/runtime 1.3.5 → 1.4.2

package/dist/js/treeshaking/ssr/serverRender/entry.js

@@ -0,0 +1,267 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import path from 'path';
+import { LOADABLE_STATS_FILE } from '@modern-js/utils/constants';
+import React from 'react';
+import ReactDomServer from 'react-dom/server';
+import serialize from 'serialize-javascript';
+import ReactHelmet from 'react-helmet';
+import { toFragments } from "./template";
+import { RenderLevel } from "./type";
+import helmetReplace from "./helmet";
+import { reduce } from "./reduce";
+import * as loadableRenderer from "./loadable";
+import * as styledComponentRenderer from "./styledComponent";
+import { time } from "./measure";
+
+var buildTemplateData = function buildTemplateData(context, data, renderLevel) {
+  var request = context.request;
+  return {
+    data: data,
+    context: {
+      request: {
+        params: request.params,
+        query: request.query,
+        pathname: request.pathname,
+        host: request.host,
+        url: request.url,
+        headers: request.headers,
+        cookieMap: request.cookieMap
+      }
+    },
+    renderLevel: renderLevel
+  };
+};
+
+var Entry = /*#__PURE__*/function () {
+  function Entry(options) {
+    _classCallCheck(this, Entry);
+
+    _defineProperty(this, "entryName", void 0);
+
+    _defineProperty(this, "result", void 0);
+
+    _defineProperty(this, "metrics", void 0);
+
+    _defineProperty(this, "logger", void 0);
+
+    _defineProperty(this, "App", void 0);
+
+    _defineProperty(this, "fragments", void 0);
+
+    var ctx = options.ctx;
+    var entryName = ctx.entryName,
+        templateHTML = ctx.template;
+    this.fragments = toFragments(templateHTML);
+    this.entryName = entryName;
+    this.App = options.App;
+    this.metrics = ctx.metrics;
+    this.logger = ctx.logger;
+    this.result = {
+      renderLevel: RenderLevel.CLIENT_RENDER,
+      html: '',
+      chunksMap: {
+        js: '',
+        css: ''
+      }
+    };
+  }
+
+  _createClass(Entry, [{
+    key: "renderToHtml",
+    value: function () {
+      var _renderToHtml = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(context) {
+        var ssrContext, prefetchData, html, templateData, SSRData, _iterator, _step, fragment, helmetData;
+
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                ssrContext = context.ssrContext;
+
+                if (!ssrContext.redirection.url) {
+                  _context.next = 3;
+                  break;
+                }
+
+                return _context.abrupt("return", '');
+
+              case 3:
+                _context.next = 5;
+                return this.prefetch(context);
+
+              case 5:
+                prefetchData = _context.sent;
+
+                if (!ssrContext.redirection.url) {
+                  _context.next = 8;
+                  break;
+                }
+
+                return _context.abrupt("return", '');
+
+              case 8:
+                if (this.result.renderLevel >= RenderLevel.SERVER_PREFETCH) {
+                  this.result.html = this.renderToString(context);
+                }
+
+                if (!ssrContext.redirection.url) {
+                  _context.next = 11;
+                  break;
+                }
+
+                return _context.abrupt("return", '');
+
+              case 11:
+                html = '';
+                templateData = buildTemplateData(ssrContext, prefetchData, this.result.renderLevel);
+                SSRData = this.getSSRDataScript(templateData);
+                _iterator = _createForOfIteratorHelper(this.fragments);
+
+                try {
+                  for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                    fragment = _step.value;
+
+                    if (fragment.isVariable && fragment.content === 'SSRDataScript') {
+                      html += fragment.getValue(SSRData);
+                    } else {
+                      html += fragment.getValue(this.result);
+                    }
+                  }
+                } catch (err) {
+                  _iterator.e(err);
+                } finally {
+                  _iterator.f();
+                }
+
+                helmetData = ReactHelmet.renderStatic();
+                return _context.abrupt("return", helmetData ? helmetReplace(html, helmetData) : html);
+
+              case 18:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function renderToHtml(_x) {
+        return _renderToHtml.apply(this, arguments);
+      }
+
+      return renderToHtml;
+    }()
+  }, {
+    key: "prefetch",
+    value: function () {
+      var _prefetch = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(context) {
+        var prefetch, prefetchData, end, prefetchCost;
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                prefetch = this.App.prefetch;
+                end = time();
+                _context2.prev = 2;
+
+                if (!prefetch) {
+                  _context2.next = 9;
+                  break;
+                }
+
+                _context2.next = 6;
+                return prefetch(context);
+
+              case 6:
+                _context2.t0 = _context2.sent;
+                _context2.next = 10;
+                break;
+
+              case 9:
+                _context2.t0 = null;
+
+              case 10:
+                prefetchData = _context2.t0;
+                this.result.renderLevel = RenderLevel.SERVER_PREFETCH;
+                prefetchCost = end();
+                this.logger.debug("App Prefetch cost = %d ms", prefetchCost);
+                this.metrics.emitTimer('app.prefetch.cost', prefetchCost);
+                _context2.next = 22;
+                break;
+
+              case 17:
+                _context2.prev = 17;
+                _context2.t1 = _context2["catch"](2);
+                this.result.renderLevel = RenderLevel.CLIENT_RENDER;
+                this.logger.error('App Prefetch Render', _context2.t1);
+                this.metrics.emitCounter('app.prefetch.render.error', 1);
+
+              case 22:
+                return _context2.abrupt("return", prefetchData || {});
+
+              case 23:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this, [[2, 17]]);
+      }));
+
+      function prefetch(_x2) {
+        return _prefetch.apply(this, arguments);
+      }
+
+      return prefetch;
+    }()
+  }, {
+    key: "renderToString",
+    value: function renderToString(context) {
+      var html = '';
+      var end = time();
+      var ssrContext = context.ssrContext;
+
+      try {
+        var App = /*#__PURE__*/React.createElement(this.App, {
+          context: Object.assign(context, {
+            ssr: true
+          })
+        }); // Todo render Hook
+
+        var renderContext = {
+          loadableManifest: path.resolve(ssrContext.distDir, LOADABLE_STATS_FILE),
+          result: this.result,
+          entryName: this.entryName
+        };
+        html = reduce(App, renderContext, [styledComponentRenderer.toHtml, loadableRenderer.toHtml, function (jsx) {
+          return ReactDomServer.renderToString(jsx);
+        }]);
+        var cost = end();
+        this.logger.debug('App Render To HTML cost = %d ms', cost);
+        this.metrics.emitTimer('app.render.html.cost', cost);
+        this.result.renderLevel = RenderLevel.SERVER_RENDER;
+      } catch (e) {
+        this.logger.error('App Render To HTML', e);
+        this.metrics.emitCounter('app.render.html.error', 1);
+      }
+
+      return html;
+    }
+  }, {
+    key: "getSSRDataScript",
+    value: function getSSRDataScript(templateData) {
+      return {
+        SSRDataScript: "\n        <script>window._SSR_DATA = ".concat(serialize(templateData, {
+          isJSON: true
+        }), "</script>\n      ")
+      };
+    }
+  }]);
+
+  return Entry;
+}();
+
+export { Entry as default };

package/dist/js/treeshaking/ssr/serverRender/helmet.js

@@ -0,0 +1,37 @@
+// 用于 react-helmet 正则替换
+var RE_HTML_ATTR = /<html[^>]*>/;
+var RE_BODY_ATTR = /<body[^>]*>/;
+var RE_LAST_IN_HEAD = /<\/head>/;
+var RE_TITLE = /<title[^>]*>([\s\S\n\r]*?)<\/title>/g;
+var TEST_TITLE_CONTENT = /(?<=<title[^>]*>)([\s\S\n\r]*?)([.|\S])([\s\S\n\r]*?)(?=<\/title>)/g; // 通过 react-helmet 修改模板
+
+export default function helmet(content, helmetData) {
+  var result = content;
+  var bodyAttributes = helmetData.bodyAttributes.toString();
+
+  if (bodyAttributes) {
+    result = result.replace(RE_BODY_ATTR, "<body ".concat(bodyAttributes, ">"));
+  }
+
+  var htmlAttributes = helmetData.htmlAttributes.toString();
+
+  if (htmlAttributes) {
+    result = result.replace(RE_HTML_ATTR, "<html ".concat(htmlAttributes, ">"));
+  }
+
+  var base = helmetData.base.toString();
+  var link = helmetData.link.toString();
+  var meta = helmetData.meta.toString();
+  var noscript = helmetData.noscript.toString();
+  var script = helmetData.script.toString();
+  var style = helmetData.style.toString();
+  var title = helmetData.title.toString(); // 如果模板中存在 title，且 helmetData title 有内容则做替换
+
+  var existTitle = RE_TITLE.test(content);
+
+  if (TEST_TITLE_CONTENT.test(title.trim()) && existTitle) {
+    result = result.replace(RE_TITLE, title);
+  }
+
+  return result.replace(RE_LAST_IN_HEAD, "\n    ".concat(base, "\n    ").concat(link, "\n    ").concat(meta, "\n    ").concat(noscript, "\n    ").concat(script, "\n    ").concat(style, "\n    ").concat(existTitle ? '' : title, "\n    </head>\n  "));
+}

package/dist/js/treeshaking/ssr/serverRender/index.js

@@ -0,0 +1,69 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import { RuntimeContext } from '@modern-js/runtime-core';
+import { run } from '@modern-js/utils/ssr';
+import { PreRender } from "../react/prerender";
+import SSREntry from "./entry";
+import { time } from "./measure";
+export var render = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(ctx) {
+    var _,
+        App,
+        ssrContext,
+        _args2 = arguments;
+
+    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _ = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : process.cwd();
+            App = _args2.length > 2 ? _args2[2] : undefined;
+            ssrContext = ctx.ssrContext;
+            return _context2.abrupt("return", run(ssrContext.request.headers, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+              var entry, end, html, cost, cacheConfig;
+              return _regeneratorRuntime().wrap(function _callee$(_context) {
+                while (1) {
+                  switch (_context.prev = _context.next) {
+                    case 0:
+                      entry = new SSREntry({
+                        ctx: ssrContext,
+                        App: App
+                      });
+                      entry.metrics.emitCounter('app.visit.count', 1);
+                      end = time();
+                      _context.next = 5;
+                      return entry.renderToHtml(ctx);
+
+                    case 5:
+                      html = _context.sent;
+                      cost = end();
+                      entry.logger.info('App Render Total cost = %d ms', cost);
+                      entry.metrics.emitTimer('app.render.cost', cost);
+                      cacheConfig = PreRender.config();
+
+                      if (cacheConfig) {
+                        ctx.ssrContext.cacheConfig = cacheConfig;
+                      }
+
+                      return _context.abrupt("return", html);
+
+                    case 12:
+                    case "end":
+                      return _context.stop();
+                  }
+                }
+              }, _callee);
+            }))));
+
+          case 4:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+
+  return function render(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();

package/dist/js/treeshaking/ssr/serverRender/loadable.js

@@ -0,0 +1,59 @@
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import path from 'path';
+import { ChunkExtractor } from '@loadable/server';
+
+function getLoadableScripts(extractor) {
+  var check = function check(scripts) {
+    return (scripts || '').includes('__LOADABLE_REQUIRED_CHUNKS___ext');
+  };
+
+  var scripts = extractor.getScriptTags();
+
+  if (!check(scripts)) {
+    return '';
+  }
+
+  return scripts.split('</script>') // 前两个 script为 loadable 必须的 script
+  .slice(0, 2).map(function (i) {
+    return "".concat(i, "</script>");
+  }).join('');
+}
+
+export var toHtml = function toHtml(jsx, renderer, next) {
+  var loadableManifest = renderer.loadableManifest,
+      chunksMap = renderer.result.chunksMap;
+
+  if (!loadableManifest || chunksMap.js) {
+    return next(jsx);
+  }
+
+  var extractor = new ChunkExtractor({
+    statsFile: loadableManifest,
+    entrypoints: [renderer.entryName]
+  });
+  var html = next(extractor.collectChunks(jsx));
+  var chunks = extractor.getChunkAssets(extractor.chunks);
+  chunksMap.js = (chunksMap.js || '') + getLoadableScripts(extractor);
+
+  var _iterator = _createForOfIteratorHelper(chunks),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var v = _step.value;
+      var fileType = path.extname(v.url).slice(1);
+
+      if (fileType === 'js') {
+        chunksMap[fileType] += "<script src=\"".concat(v.url, "\"></script>");
+      } else if (fileType === 'css') {
+        chunksMap[fileType] += "<link href=\"".concat(v.url, "\" rel=\"stylesheet\" />");
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+
+  return html;
+};

package/dist/js/treeshaking/ssr/serverRender/measure.js

@@ -0,0 +1,17 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
+var getLatency = function getLatency(hrtime) {
+  var _process$hrtime = process.hrtime(hrtime),
+      _process$hrtime2 = _slicedToArray(_process$hrtime, 2),
+      s = _process$hrtime2[0],
+      ns = _process$hrtime2[1];
+
+  return s * 1e3 + ns / 1e6;
+};
+
+export var time = function time() {
+  var hrtime = process.hrtime();
+  return function () {
+    return getLatency(hrtime);
+  };
+};

package/dist/js/treeshaking/ssr/serverRender/reduce.js

@@ -0,0 +1,11 @@
+export function reduce(jsx, renderer, middleware) {
+  var index = 0;
+
+  var createNext = function createNext() {
+    return function (App) {
+      return middleware[index++](App, renderer, createNext());
+    };
+  };
+
+  return createNext()(jsx);
+}

package/dist/js/treeshaking/ssr/serverRender/styledComponent.js

@@ -0,0 +1,8 @@
+import { ServerStyleSheet } from '@modern-js/runtime-core/styled';
+export var toHtml = function toHtml(jsx, renderer, next) {
+  var sheet = new ServerStyleSheet();
+  var html = next(sheet.collectStyles(jsx));
+  var css = sheet.getStyleTags();
+  renderer.result.chunksMap.css += css;
+  return html;
+};

package/dist/js/treeshaking/ssr/serverRender/template.js

@@ -0,0 +1,111 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import fs from 'fs';
+
+var readFile = function readFile(filepath) {
+  if (fs.existsSync(filepath)) {
+    return fs.readFileSync(filepath, 'utf-8');
+  } else {
+    return null;
+  }
+};
+
+var VARIABLE_REG_EXP = /<!--<\?([-=+])\s*(.*?)\s*\?>-->/;
+var VARIABLE_SPLITTER = /(<!--<\?.*?\?>-->)/;
+var ENCODE_HTML_RULES = {
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&#34;',
+  "'": '&#39;'
+};
+var MATCH_HTML = /[&<>'"]/g;
+
+function encodeChar(c) {
+  return ENCODE_HTML_RULES[c] || c;
+}
+
+function escape(str) {
+  return str.replace(MATCH_HTML, encodeChar);
+}
+
+export var Fragment = /*#__PURE__*/function () {
+  function Fragment(template) {
+    _classCallCheck(this, Fragment);
+
+    _defineProperty(this, "isVariable", void 0);
+
+    _defineProperty(this, "content", void 0);
+
+    _defineProperty(this, "filters", void 0);
+
+    _defineProperty(this, "path", void 0);
+
+    var match = VARIABLE_REG_EXP.exec(template);
+
+    if (match) {
+      var _match = _slicedToArray(match, 3),
+          filterFlag = _match[1],
+          content = _match[2];
+
+      this.isVariable = true;
+      this.content = content;
+      this.filters = [Fragment.filterMap[filterFlag]];
+      this.path = content.replace(/\[['"](.*?)['"]\]/g, '.$1').split('.');
+    } else {
+      this.isVariable = false;
+      this.content = template;
+      this.filters = [];
+      this.path = [];
+    }
+  }
+
+  _createClass(Fragment, [{
+    key: "getValue",
+    value: function getValue(data) {
+      if (this.isVariable) {
+        var value = this.path.reduce(function (p, n) {
+          return p != null ? p[n] : p;
+        }, data);
+        return this.filters.reduce(function (p, n) {
+          return n(p);
+        }, value != null ? value : '');
+      }
+
+      return this.content;
+    }
+  }]);
+
+  return Fragment;
+}();
+
+_defineProperty(Fragment, "filterMap", {
+  '=': escape,
+  '-': function _(v) {
+    return v;
+  }
+});
+
+var fragmentListMap = {};
+export function toFragments(filename) {
+  if (fragmentListMap[filename]) {
+    return fragmentListMap[filename];
+  } // 未开启现代构建的项目无 -es6.html
+
+
+  var template = readFile(filename);
+
+  if (!template) {
+    throw new Error("Could not find template file: ".concat(filename));
+  }
+
+  var fragmentList = template.split(VARIABLE_SPLITTER).filter(function (v) {
+    return Boolean(v);
+  }).map(function (v) {
+    return new Fragment(v);
+  });
+  fragmentListMap[filename] = fragmentList;
+  return fragmentList;
+}

package/dist/js/treeshaking/ssr/serverRender/type.js

@@ -0,0 +1,8 @@
+// import { IncomingHttpHeaders } from 'http';
+export var RenderLevel;
+
+(function (RenderLevel) {
+  RenderLevel[RenderLevel["CLIENT_RENDER"] = 0] = "CLIENT_RENDER";
+  RenderLevel[RenderLevel["SERVER_PREFETCH"] = 1] = "SERVER_PREFETCH";
+  RenderLevel[RenderLevel["SERVER_RENDER"] = 2] = "SERVER_RENDER";
+})(RenderLevel || (RenderLevel = {}));

package/dist/js/treeshaking/ssr/utils.js

@@ -0,0 +1,53 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+export var formatServer = function formatServer(request) {
+  var _ref = request.headers || {},
+      _ref$cookie = _ref.cookie,
+      cookie = _ref$cookie === void 0 ? '' : _ref$cookie,
+      _ref$userAgent = _ref['user-agent'],
+      userAgent = _ref$userAgent === void 0 ? '' : _ref$userAgent,
+      referer = _ref.referer;
+
+  return _objectSpread({
+    cookie: cookie,
+    userAgent: userAgent,
+    referer: referer
+  }, request);
+};
+
+var getQuery = function getQuery() {
+  return window.location.search.substring(1).split('&').reduce(function (res, item) {
+    var _item$split = item.split('='),
+        _item$split2 = _slicedToArray(_item$split, 2),
+        key = _item$split2[0],
+        value = _item$split2[1];
+
+    res[key] = value;
+    return res;
+  }, {});
+};
+
+export var formatClient = function formatClient(request) {
+  return {
+    params: request.params || {},
+    host: request.host || location.host,
+    pathname: request.pathname || location.pathname,
+    headers: request.headers || {},
+    cookieMap: request.cookieMap || {},
+    cookie: request.headers.cookie || document.cookie,
+    userAgent: request.headers['user-agent'] || navigator.userAgent,
+    referer: request.referer || document.referrer,
+    query: request.query || getQuery(),
+    url: location.href
+  };
+};
+export var mockResponse = function mockResponse() {
+  return {
+    setHeader: function setHeader() {
+      console.info('setHeader can only be used in the server side');
+    },
+    status: function status() {
+      console.info('status can only be used in the server side');
+    }
+  };
+};