@modern-js/runtime 2.0.0-beta.0 → 2.0.0-beta.1

package/dist/js/treeshaking/ssr/react/prerender/index.js

@@ -16,10 +16,9 @@ var PROP_NAMES = {
   FALLBACK: 'fallback',
   MATCHES: 'matches'
 };
-
-var handleClientStateChange = function handleClientStateChange() {// not used
+var handleClientStateChange = function handleClientStateChange() {
+  // not used
 };
-
 var mapStateOnServer = function mapStateOnServer(reduceProps) {
   var defaultProps = {
     interval: 10,
@@ -34,15 +33,12 @@ var mapStateOnServer = function mapStateOnServer(reduceProps) {
     var propKey = key;
     var reduceProp = reduceProps[propKey];
     var nextProps = props;
-
     if (exist(reduceProp)) {
       nextProps = _objectSpread(_objectSpread({}, props), {}, _defineProperty({}, propKey, reduceProp));
     }
-
     return nextProps;
   }, defaultProps);
 };
-
 var reducePropsToState = function reducePropsToState(propsList) {
   var reduceProps = {
     interval: getOutermostProperty(propsList, PROP_NAMES.INTERVAL),
@@ -55,19 +51,14 @@ var reducePropsToState = function reducePropsToState(propsList) {
   };
   return reduceProps;
 };
-
 function factory(Component) {
   var Spr = /*#__PURE__*/function (_React$Component) {
     _inherits(Spr, _React$Component);
-
     var _super = _createSuper(Spr);
-
     function Spr() {
       _classCallCheck(this, Spr);
-
       return _super.apply(this, arguments);
     }
-
     _createClass(Spr, [{
       key: "verify",
       value: function verify() {
@@ -77,13 +68,10 @@ function factory(Component) {
       key: "render",
       value: function render() {
         var newProps = _objectSpread({}, this.props);
-
         var validate = this.verify();
-
         if (!validate) {
           throw new Error('invalid props, check usage');
         }
-
         return /*#__PURE__*/createElement(Component, _objectSpread({}, newProps));
       }
     }], [{
@@ -95,25 +83,18 @@ function factory(Component) {
         Component.canUseDOM = canUseDOM;
       }
     }]);
-
     return Spr;
   }(React.Component);
-
   _defineProperty(Spr, "peek", Component.peek);
-
   _defineProperty(Spr, "rewind", Component.rewind);
-
   _defineProperty(Spr, "config", function () {
     var mappedState = Component.rewind();
     return mappedState;
   });
-
   return Spr;
 }
-
 var NullComponent = function NullComponent() {
   return null;
 };
-
 var SprSideEffects = withSideEffect(reducePropsToState, handleClientStateChange, mapStateOnServer)(NullComponent);
 export var PreRender = factory(SprSideEffects);

package/dist/js/treeshaking/ssr/react/prerender/util.js

@@ -3,22 +3,18 @@ var REQUEST_META = ['header', 'query'];
 export var getInnermostProperty = function getInnermostProperty(propsList, propName) {
   for (var i = propsList.length - 1; i >= 0; i--) {
     var props = propsList[i];
-
     if (props.hasOwnProperty(propName)) {
       return props[propName];
     }
   }
-
   return null;
 };
 export var getOutermostProperty = function getOutermostProperty(propsList, propName) {
   var _iterator = _createForOfIteratorHelper(propsList),
-      _step;
-
+    _step;
   try {
     for (_iterator.s(); !(_step = _iterator.n()).done;) {
       var props = _step.value;
-
       if (props.hasOwnProperty(propName)) {
         return props[propName];
       }
@@ -28,7 +24,6 @@ export var getOutermostProperty = function getOutermostProperty(propsList, propN
   } finally {
     _iterator.f();
   }
-
   return null;
 };
 export var aggKeysFromPropsList = function aggKeysFromPropsList(propsList, propName) {
@@ -42,7 +37,6 @@ export var aggKeysFromPropsList = function aggKeysFromPropsList(propsList, propN
   }).reduce(function (result, next) {
     REQUEST_META.forEach(function (key) {
       var prop = next[propName];
-
       if (prop !== null && prop !== void 0 && prop.hasOwnProperty(key) && usefulArray(prop[key])) {
         result[key] = unique(result[key].concat(prop[key]));
       }
@@ -51,13 +45,10 @@ export var aggKeysFromPropsList = function aggKeysFromPropsList(propsList, propN
   }, initResult);
   return REQUEST_META.reduce(function (result, next) {
     var _result$key;
-
     var key = next;
-
     if (result[key] && ((_result$key = result[key]) === null || _result$key === void 0 ? void 0 : _result$key.length) === 0) {
       delete result[key];
     }
-
     return result;
   }, res);
 };
@@ -71,8 +62,8 @@ export var aggMatchesFromPropsList = function aggMatchesFromPropsList(propsList,
     return usefulObject(props[propName]);
   }).reduce(function (result, next) {
     REQUEST_META.forEach(function (key) {
-      var prop = next[propName]; // 这边目前是浅拷贝，越后渲染优先级越高
-
+      var prop = next[propName];
+      // 这边目前是浅拷贝，越后渲染优先级越高
       if (prop !== null && prop !== void 0 && prop.hasOwnProperty(key) && usefulObject(prop[key])) {
         result[key] = Object.assign(result[key], prop[key]);
       }
@@ -81,35 +72,27 @@ export var aggMatchesFromPropsList = function aggMatchesFromPropsList(propsList,
   }, initResult);
   return REQUEST_META.reduce(function (result, next) {
     var key = next;
-
     if (result[key] && Object.keys(result[key]).length === 0) {
       delete result[key];
     }
-
     return result;
   }, res);
 };
-
 function unique(arr) {
   return Array.from(new Set(arr));
 }
-
 function usefulObject(target) {
   if (!exist(target)) {
     return false;
   }
-
   return target.constructor === Object && Object.keys(target).length > 0;
 }
-
 function usefulArray(target) {
   if (!exist(target)) {
     return false;
   }
-
   return Array.isArray(target) && target.length > 0;
 }
-
 export function exist(target) {
   return target != null;
 }

package/dist/js/treeshaking/ssr/react/withCallback/index.js

@@ -2,13 +2,12 @@
 import { useRef, useLayoutEffect } from 'react';
 export var WithCallback = function WithCallback(_ref) {
   var callback = _ref.callback,
-      children = _ref.children;
+    children = _ref.children;
   var once = useRef(false);
   useLayoutEffect(function () {
     if (once.current) {
       return;
     }
-
     once.current = true;
     callback();
   }, [callback]);

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

@@ -1,37 +1,38 @@
 // 用于 react-helmet 正则替换
+import { EOL } from 'os';
 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>/;
-var TEST_TITLE_CONTENT = /(?<=<title[^>]*>)([\s\S\n\r]*?)([.|\S])([\s\S\n\r]*?)(?=<\/title>)/; // 通过 react-helmet 修改模板
+var TEST_TITLE_CONTENT = /(?<=<title[^>]*>)([\s\S\n\r]*?)([.|\S])([\s\S\n\r]*?)(?=<\/title>)/;
 
+// 通过 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);
+  var title = helmetData.title.toString();
 
-  if (TEST_TITLE_CONTENT.test(title.trim()) && existTitle) {
+  // 如果模板中存在 title，且 helmetData title 有内容则做替换
+  var existTitleTag = RE_TITLE.test(content);
+  var shouldReplaceTitle = existTitleTag && TEST_TITLE_CONTENT.test(title.trim());
+  if (shouldReplaceTitle) {
     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  "));
+  var helmetStr = [base, link, meta, noscript, script, style, !existTitleTag ? title : ''].reduce(function (pre, cur) {
+    return pre + (cur.length > 0 ? "  ".concat(cur).concat(EOL) : '');
+  }, '');
+  return result.replace(RE_LAST_IN_HEAD, "".concat(helmetStr, "</head>"));
 }

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

@@ -1,16 +1,13 @@
 import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-
 /* eslint-disable eslint-comments/disable-enable-pair */
-
 /* eslint-disable @typescript-eslint/no-var-requires */
-
 /* eslint-disable @typescript-eslint/no-require-imports */
+
 import { isReact18 } from "../utils";
 export default function serverRender(_x) {
   return _serverRender.apply(this, arguments);
 }
-
 function _serverRender() {
   _serverRender = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(options) {
     var pipe, html;
@@ -22,22 +19,17 @@ function _serverRender() {
               _context.next = 7;
               break;
             }
-
             _context.next = 3;
             return require("./renderToStream").render(options);
-
           case 3:
             pipe = _context.sent;
             return _context.abrupt("return", pipe);
-
           case 7:
             _context.next = 9;
             return require("./renderToString").render(options);
-
           case 9:
             html = _context.sent;
             return _context.abrupt("return", html);
-
           case 11:
           case "end":
             return _context.stop();

package/dist/js/treeshaking/ssr/serverRender/renderToStream/buildTemplate.after.js

@@ -3,15 +3,13 @@ import { buildTemplate } from "./buildTemplate.share";
 export function buildShellAfterTemplate(afterAppTemplate, options) {
   var callbacks = [injectSSRDataScript];
   return buildTemplate(afterAppTemplate, callbacks);
-
   function injectSSRDataScript(template) {
     var ssrDataScript = buildSSRDataScript();
     return template.replace('<!--<?- SSRDataScript ?>-->', ssrDataScript);
-
     function buildSSRDataScript() {
-      var ssrContext = options.context.ssrContext;
-      var _ref = ssrContext,
-          request = _ref.request;
+      var ssrContext = options.ssrContext,
+        renderLevel = options.renderLevel;
+      var request = ssrContext.request;
       var SSRData = {
         context: {
           request: {
@@ -23,7 +21,8 @@ export function buildShellAfterTemplate(afterAppTemplate, options) {
             headers: request.headers,
             cookieMap: request.cookieMap
           }
-        }
+        },
+        renderLevel: renderLevel
       };
       return "\n      <script>window._SSR_DATA = ".concat(serialize(SSRData, {
         isJSON: true

package/dist/js/treeshaking/ssr/serverRender/renderToStream/bulidTemplate.before.js

@@ -1,29 +1,60 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import ReactHelmet from 'react-helmet';
+import { matchRoutes } from 'react-router-dom';
 import helmetReplace from "../helmet";
-import { HEAD_REG_EXP, buildTemplate } from "./buildTemplate.share"; // build head template
+import { HEAD_REG_EXP, buildTemplate } from "./buildTemplate.share";
+var CSS_CHUNKS_PLACEHOLDER = '<!--<?- chunksMap.css ?>-->';
 
-function getHeadTemplate(beforeEntryTemplate) {
+// build head template
+function getHeadTemplate(beforeEntryTemplate, context) {
   var callbacks = [function (headTemplate) {
     var helmetData = ReactHelmet.renderStatic();
     return helmetData ? helmetReplace(headTemplate, helmetData) : headTemplate;
-  }];
-
+  },
+  // @TODO: prefetch scripts of lazy component
+  injectCss];
   var _ref = beforeEntryTemplate.match(HEAD_REG_EXP) || [],
-      _ref2 = _slicedToArray(_ref, 1),
-      _ref2$ = _ref2[0],
-      headTemplate = _ref2$ === void 0 ? '' : _ref2$;
-
+    _ref2 = _slicedToArray(_ref, 1),
+    _ref2$ = _ref2[0],
+    headTemplate = _ref2$ === void 0 ? '' : _ref2$;
   if (!headTemplate.length) {
     return '';
   }
+  return buildTemplate(headTemplate, callbacks);
+  function injectCss(headTemplate) {
+    return headTemplate.replace(CSS_CHUNKS_PLACEHOLDER, getCssChunks());
+    function getCssChunks() {
+      var routeManifest = context.routeManifest,
+        routerContext = context.routerContext,
+        routes = context.routes;
+      if (!routeManifest || !routerContext || !routes) {
+        return '';
+      }
+      var routeAssets = routeManifest.routeAssets;
+      var cssChunks = [];
+      var matches = matchRoutes(routes, routerContext.location);
+      matches === null || matches === void 0 ? void 0 : matches.forEach(function (match) {
+        var routeId = match.route.id;
+        if (routeId) {
+          var _routeAssets$routeId$ = routeAssets[routeId].assets,
+            assets = _routeAssets$routeId$ === void 0 ? [] : _routeAssets$routeId$;
+          var _cssChunks = assets.filter(function (asset) {
+            return asset === null || asset === void 0 ? void 0 : asset.endsWith('.css');
+          });
+          cssChunks.push.apply(cssChunks, _toConsumableArray(_cssChunks));
+        }
+      });
+      var styleLinks = cssChunks.map(function (chunk) {
+        return "<link href=\"".concat(chunk, "\" rel=\"stylesheet\" />");
+      });
+      return "".concat(styleLinks.join(''));
+    }
+  }
+}
 
-  return buildTemplate(headTemplate, callbacks); // @TODO: inject css chunks of lazy components
-  // @TODO: prefetch scripts of lazy component
-} // build script
-
-
-export function buildShellBeforeTemplate(beforeAppTemplate) {
-  var headTemplate = getHeadTemplate(beforeAppTemplate);
+// build script
+export function buildShellBeforeTemplate(beforeAppTemplate, context) {
+  var headTemplate = getHeadTemplate(beforeAppTemplate, context);
   return beforeAppTemplate.replace(HEAD_REG_EXP, headTemplate);
 }

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

@@ -4,117 +4,47 @@ import { createElement } from 'react';
 import { run } from '@modern-js/utils/ssr';
 import { PreRender } from "../../react/prerender";
 import { time } from "../utils";
-import { createTemplates } from "./template";
 import renderToPipe from "./renderToPipe";
 export var render = function render(_ref) {
   var App = _ref.App,
-      context = _ref.context;
+    context = _ref.context;
   var ssrContext = context.ssrContext;
-
   if (!ssrContext) {
     throw new Error('The "ssrContext" must not be undefined, but received undefined');
   }
-
   return run(ssrContext.request.headers, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-    var end_all, rootElement, getTemplates, end, pipe;
+    var end, rootElement, pipe;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            end_all = time();
+            end = time();
             rootElement = /*#__PURE__*/createElement(App, {
               context: Object.assign(context || {}, {
                 ssr: true
               })
             });
-            getTemplates = createTemplates(context);
-            end = time();
-            pipe = renderToPipe(rootElement, getTemplates, {
+            pipe = renderToPipe(rootElement, context, {
               onShellReady: function onShellReady() {
                 // set cacheConfig
                 var cacheConfig = PreRender.config();
-
                 if (cacheConfig) {
-                  context.ssrContext.cacheConfig = cacheConfig;
+                  ssrContext.cacheConfig = cacheConfig;
                 }
               },
               onAllReady: function onAllReady() {
-                // computed render html cost
+                // calculate streaming ssr cost
                 var cost = end();
                 ssrContext.logger.debug('App Render To HTML cost = %d ms', cost);
-                ssrContext.metrics.emitTimer('app.render.html.cost', cost); // computed all ssr const
-
-                var cost_all = end_all();
-                ssrContext.logger.info('App Render Total cost = %d ms', cost_all);
-                ssrContext.metrics.emitTimer('app.render.cost', cost_all);
+                ssrContext.metrics.emitTimer('app.render.html.cost', cost);
               }
             });
             return _context.abrupt("return", pipe);
-
-          case 6:
+          case 4:
           case "end":
             return _context.stop();
         }
       }
     }, _callee);
-  }))); // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
-  function prefetch(_x, _x2) {
-    return _prefetch.apply(this, arguments);
-  }
-
-  function _prefetch() {
-    _prefetch = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(App, context) {
-      var prefetch, ssrContext, prefetchData, end, prefetchCost;
-      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              prefetch = App.prefetch;
-              ssrContext = context.ssrContext;
-              end = time();
-              _context2.prev = 3;
-
-              if (!prefetch) {
-                _context2.next = 10;
-                break;
-              }
-
-              _context2.next = 7;
-              return prefetch(context);
-
-            case 7:
-              _context2.t0 = _context2.sent;
-              _context2.next = 11;
-              break;
-
-            case 10:
-              _context2.t0 = null;
-
-            case 11:
-              prefetchData = _context2.t0;
-              prefetchCost = end();
-              ssrContext.logger.debug("App Prefetch cost = %d ms", prefetchCost);
-              ssrContext.metrics.emitTimer('app.prefetch.cost', prefetchCost);
-              _context2.next = 21;
-              break;
-
-            case 17:
-              _context2.prev = 17;
-              _context2.t1 = _context2["catch"](3);
-              ssrContext.logger.error('App Prefetch Render', _context2.t1);
-              ssrContext.metrics.emitCounter('app.prefetch.render.error', 1);
-
-            case 21:
-              return _context2.abrupt("return", prefetchData || {});
-
-            case 22:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2, null, [[3, 17]]);
-    }));
-    return _prefetch.apply(this, arguments);
-  }
+  })));
 };

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

@@ -1,17 +1,15 @@
 import { ChunkExtractor } from '@loadable/server';
 export function getLoadableChunks(_ref) {
   var context = _ref.context,
-      jsx = _ref.jsx;
+    jsx = _ref.jsx;
   var _ref2 = context.ssrContext,
-      loadableStats = _ref2.loadableStats,
-      entryName = _ref2.entryName;
-
+    loadableStats = _ref2.loadableStats,
+    entryName = _ref2.entryName;
   if (!loadableStats) {
     return {
       jsx: jsx
     };
   }
-
   var extractor = new ChunkExtractor({
     stats: loadableStats,
     entrypoints: [entryName]

package/dist/js/treeshaking/ssr/serverRender/renderToStream/renderToPipe.js

@@ -1,51 +1,63 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { Transform } from 'stream';
 import { renderToPipeableStream } from 'react-dom/server';
-
-function renderToPipe(rootElement, getTemplates, options) {
+import { RenderLevel } from "../types";
+import { getTemplates } from "./template";
+function renderToPipe(rootElement, context, options) {
   var isShellStream = true;
-
+  var ssrContext = context.ssrContext;
   var forUserPipe = function forUserPipe(stream) {
     return new Promise(function (resolve) {
       var _renderToPipeableStre = renderToPipeableStream(rootElement, _objectSpread(_objectSpread({}, options), {}, {
-        onShellReady: function onShellReady() {
-          var _options$onShellReady;
-
-          options === null || options === void 0 ? void 0 : (_options$onShellReady = options.onShellReady) === null || _options$onShellReady === void 0 ? void 0 : _options$onShellReady.call(options);
-
-          var _getTemplates = getTemplates(),
+          onShellReady: function onShellReady() {
+            var _options$onShellReady;
+            var _getTemplates = getTemplates(context, RenderLevel.SERVER_RENDER),
               shellAfter = _getTemplates.shellAfter,
               shellBefore = _getTemplates.shellBefore;
-
-          var injectableTransform = new Transform({
-            transform: function transform(chunk, _encoding, callback) {
-              try {
-                if (isShellStream) {
-                  this.push(joinChunk(shellBefore, chunk, shellAfter));
-                  isShellStream = false;
-                } else {
-                  this.push(chunk);
-                }
-
-                callback();
-              } catch (e) {
-                if (e instanceof Error) {
-                  callback(e);
-                } else {
-                  callback(new Error('Received unkown error when streaming'));
+            options === null || options === void 0 ? void 0 : (_options$onShellReady = options.onShellReady) === null || _options$onShellReady === void 0 ? void 0 : _options$onShellReady.call(options);
+            var injectableTransform = new Transform({
+              transform: function transform(chunk, _encoding, callback) {
+                try {
+                  if (isShellStream) {
+                    this.push(joinChunk(shellBefore, chunk, shellAfter));
+                    isShellStream = false;
+                  } else {
+                    this.push(chunk);
+                  }
+                  callback();
+                } catch (e) {
+                  if (e instanceof Error) {
+                    callback(e);
+                  } else {
+                    callback(new Error('Received unkown error when streaming'));
+                  }
                 }
               }
-            }
-          });
-          resolve(pipe(injectableTransform).pipe(stream));
-        }
-      })),
-          pipe = _renderToPipeableStre.pipe;
+            });
+            resolve(pipe(injectableTransform).pipe(stream));
+          },
+          onShellError: function onShellError(error) {
+            var _options$onShellError;
+            // Don't log error in `onShellError` callback, since it has been logged in `onError` callback
+            ssrContext.metrics.emitCounter('app.render.streaming.shell.error', 1);
+            var _getTemplates2 = getTemplates(context, RenderLevel.CLIENT_RENDER),
+              shellAfter = _getTemplates2.shellAfter,
+              shellBefore = _getTemplates2.shellBefore;
+            var fallbackHtml = "".concat(shellBefore).concat(shellAfter);
+            resolve(fallbackHtml);
+            options === null || options === void 0 ? void 0 : (_options$onShellError = options.onShellError) === null || _options$onShellError === void 0 ? void 0 : _options$onShellError.call(options, error);
+          },
+          onError: function onError(error) {
+            var _options$onError;
+            ssrContext.logger.error('An error occurs during streaming SSR', error);
+            ssrContext.metrics.emitCounter('app.render.streaming.error', 1);
+            options === null || options === void 0 ? void 0 : (_options$onError = options.onError) === null || _options$onError === void 0 ? void 0 : _options$onError.call(options, error);
+          }
+        })),
+        pipe = _renderToPipeableStre.pipe;
     });
   };
-
   return forUserPipe;
-
   function joinChunk() {
     var before = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     var chunk = arguments.length > 1 ? arguments[1] : undefined;
@@ -53,5 +65,4 @@ function renderToPipe(rootElement, getTemplates, options) {
     return "".concat(before).concat(chunk.toString()).concat(after);
   }
 }
-
 export default renderToPipe;