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

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

@@ -3,12 +3,11 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import { loadableReady } from '@loadable/component';
 import hoistNonReactStatics from 'hoist-non-react-statics';
-import { RenderLevel } from "./serverRender/type";
+import { RenderLevel } from "./serverRender/types";
 import { WithCallback } from "./react/withCallback";
-import { formatClient, mockResponse } from "./utils";
+import { formatClient, mockResponse, isReact18 } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
-var IS_REACT18 = process.env.IS_REACT18 === 'true';
-export var ssr = function ssr(_) {
+export var ssr = function ssr(config) {
   return {
     name: '@modern-js/plugin-ssr',
     setup: function setup() {
@@ -17,78 +16,98 @@ export var ssr = function ssr(_) {
         client: function () {
           var _client = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref) {
             var _window, _window$_SSR_DATA;
-
-            var App, context, ModernRender, ModernHydrate, renderLevel;
+            var App, context, ModernRender, ModernHydrate, hydrateContext, callback, renderLevel, stringSSRHydrate, streamSSRHydrate;
             return _regeneratorRuntime().wrap(function _callee$(_context) {
               while (1) {
                 switch (_context.prev = _context.next) {
                   case 0:
-                    App = _ref.App, context = _ref.context, ModernRender = _ref.ModernRender, ModernHydrate = _ref.ModernHydrate;
-                    // if render level not exist, use client render
-                    renderLevel = ((_window = window) === null || _window === void 0 ? void 0 : (_window$_SSR_DATA = _window._SSR_DATA) === null || _window$_SSR_DATA === void 0 ? void 0 : _window$_SSR_DATA.renderLevel) || RenderLevel.CLIENT_RENDER; // client render and server prefetch use same logic
-
-                    if (renderLevel === RenderLevel.CLIENT_RENDER || renderLevel === RenderLevel.SERVER_PREFETCH) {
-                      ModernRender( /*#__PURE__*/_jsx(App, {
-                        context: context
-                      }));
-                    } else if (renderLevel === RenderLevel.SERVER_RENDER) {
-                      loadableReady(function () {
-                        var hydrateContext = _objectSpread(_objectSpread({}, context), {}, {
-                          _hydration: true
-                        });
-
-                        var callback = function callback() {
-                          // won't cause component re-render because context's reference identity doesn't change
-                          delete hydrateContext._hydration;
-                        }; // callback: https://github.com/reactwg/react-18/discussions/5
-
-
-                        if (IS_REACT18) {
-                          var SSRApp = function SSRApp() {
-                            return /*#__PURE__*/_jsx(WithCallback, {
-                              callback: callback,
-                              children: /*#__PURE__*/_jsx(App, {
-                                context: hydrateContext
-                              })
-                            });
-                          };
-
-                          SSRApp = hoistNonReactStatics(SSRApp, App);
-                          ModernHydrate( /*#__PURE__*/_jsx(SSRApp, {}));
+                    streamSSRHydrate = function _streamSSRHydrate() {
+                      if (renderLevel === RenderLevel.SERVER_RENDER) {
+                        // callback: https://github.com/reactwg/react-18/discussions/5
+                        var SSRApp = function SSRApp() {
+                          return /*#__PURE__*/_jsx(WithCallback, {
+                            callback: callback,
+                            children: /*#__PURE__*/_jsx(App, {
+                              context: hydrateContext
+                            })
+                          });
+                        };
+                        SSRApp = hoistNonReactStatics(SSRApp, App);
+                        ModernHydrate( /*#__PURE__*/_jsx(SSRApp, {}));
+                      } else {
+                        ModernRender( /*#__PURE__*/_jsx(App, {
+                          context: context
+                        }));
+                      }
+                    };
+                    stringSSRHydrate = function _stringSSRHydrate() {
+                      // client render and server prefetch use same logic
+                      if (renderLevel === RenderLevel.CLIENT_RENDER || renderLevel === RenderLevel.SERVER_PREFETCH) {
+                        ModernRender( /*#__PURE__*/_jsx(App, {
+                          context: context
+                        }));
+                      } else if (renderLevel === RenderLevel.SERVER_RENDER) {
+                        if (isReact18()) {
+                          loadableReady(function () {
+                            // callback: https://github.com/reactwg/react-18/discussions/5
+                            var SSRApp = function SSRApp() {
+                              return /*#__PURE__*/_jsx(WithCallback, {
+                                callback: callback,
+                                children: /*#__PURE__*/_jsx(App, {
+                                  context: hydrateContext
+                                })
+                              });
+                            };
+                            SSRApp = hoistNonReactStatics(SSRApp, App);
+                            ModernHydrate( /*#__PURE__*/_jsx(SSRApp, {}));
+                          });
                         } else {
-                          ModernHydrate( /*#__PURE__*/_jsx(App, {
-                            context: hydrateContext
-                          }), callback);
+                          loadableReady(function () {
+                            ModernHydrate( /*#__PURE__*/_jsx(App, {
+                              context: hydrateContext
+                            }), callback);
+                          });
                         }
-                      });
-                    } else {
-                      // unknown renderlevel or renderlevel is server prefetch.
-                      console.warn("unknow render level: ".concat(renderLevel, ", execute render()"));
-                      ModernRender( /*#__PURE__*/_jsx(App, {
-                        context: context
-                      }));
+                      } else {
+                        // unknown renderlevel or renderlevel is server prefetch.
+                        console.warn("unknow render level: ".concat(renderLevel, ", execute render()"));
+                        ModernRender( /*#__PURE__*/_jsx(App, {
+                          context: context
+                        }));
+                      }
+                    };
+                    App = _ref.App, context = _ref.context, ModernRender = _ref.ModernRender, ModernHydrate = _ref.ModernHydrate;
+                    hydrateContext = _objectSpread(_objectSpread({}, context), {}, {
+                      _hydration: true
+                    });
+                    callback = function callback() {
+                      // won't cause component re-render because context's reference identity doesn't change
+                      delete hydrateContext._hydration;
+                    }; // if render level not exist, use client render
+                    renderLevel = ((_window = window) === null || _window === void 0 ? void 0 : (_window$_SSR_DATA = _window._SSR_DATA) === null || _window$_SSR_DATA === void 0 ? void 0 : _window$_SSR_DATA.renderLevel) || RenderLevel.CLIENT_RENDER; // react streamSSR hydrate
+                    if (!(isReact18() && config.mode === 'stream')) {
+                      _context.next = 8;
+                      break;
                     }
-
-                  case 3:
+                    return _context.abrupt("return", streamSSRHydrate());
+                  case 8:
+                    return _context.abrupt("return", stringSSRHydrate());
+                  case 9:
                   case "end":
                     return _context.stop();
                 }
               }
             }, _callee);
           }));
-
           function client(_x) {
             return _client.apply(this, arguments);
           }
-
           return client;
         }(),
         init: function init(_ref2, next) {
           var _window2, _window2$_SSR_DATA, _window2$_SSR_DATA$co;
-
           var context = _ref2.context;
           var request = (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$_SSR_DATA = _window2._SSR_DATA) === null || _window2$_SSR_DATA === void 0 ? void 0 : (_window2$_SSR_DATA$co = _window2$_SSR_DATA.context) === null || _window2$_SSR_DATA$co === void 0 ? void 0 : _window2$_SSR_DATA$co.request;
-
           if (!request) {
             context.ssrContext = _objectSpread(_objectSpread({}, context.ssrContext), {}, {
               response: mockResp,
@@ -98,7 +117,6 @@ export var ssr = function ssr(_) {
               context: context
             });
           }
-
           context.ssrContext.response = mockResp;
           context.ssrContext.request = formatClient(request);
           return next({
@@ -107,12 +125,10 @@ export var ssr = function ssr(_) {
         },
         pickContext: function pickContext(_ref3, next) {
           var _window3, _window3$_SSR_DATA, _window3$_SSR_DATA$co;
-
           var context = _ref3.context,
-              pickedContext = _ref3.pickedContext;
+            pickedContext = _ref3.pickedContext;
           var request = (_window3 = window) === null || _window3 === void 0 ? void 0 : (_window3$_SSR_DATA = _window3._SSR_DATA) === null || _window3$_SSR_DATA === void 0 ? void 0 : (_window3$_SSR_DATA$co = _window3$_SSR_DATA.context) === null || _window3$_SSR_DATA$co === void 0 ? void 0 : _window3$_SSR_DATA$co.request;
           var initialData = context.initialData;
-
           if (!request) {
             return next({
               context: context,
@@ -121,7 +137,6 @@ export var ssr = function ssr(_) {
               })
             });
           }
-
           return next({
             context: context,
             pickedContext: _objectSpread(_objectSpread({}, pickedContext), {}, {

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

@@ -1,11 +1,8 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import { registerPrefetch } from "../core";
-import { render } from "./serverRender";
-import prefetch from "./prefetch";
 import { formatServer } from "./utils";
-var registeredApps = new WeakSet();
+import render from "./serverRender";
 export var ssr = function ssr() {
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return {
@@ -15,44 +12,36 @@ export var ssr = function ssr() {
         server: function () {
           var _server = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref) {
             var App, context, html;
-            return _regeneratorRuntime().wrap(function _callee$(_context2) {
+            return _regeneratorRuntime().wrap(function _callee$(_context) {
               while (1) {
-                switch (_context2.prev = _context2.next) {
+                switch (_context.prev = _context.next) {
                   case 0:
                     App = _ref.App, context = _ref.context;
-
-                    if (!registeredApps.has(App)) {
-                      registerPrefetch(App, function (_context) {
-                        return prefetch(App, _context);
-                      });
-                      registeredApps.add(App);
-                    }
-
-                    _context2.next = 4;
-                    return render(context, config, App);
-
-                  case 4:
-                    html = _context2.sent;
-                    return _context2.abrupt("return", html);
-
-                  case 6:
+                    _context.next = 3;
+                    return render({
+                      context: context,
+                      App: App,
+                      config: config
+                    });
+                  case 3:
+                    html = _context.sent;
+                    return _context.abrupt("return", html);
+                  case 5:
                   case "end":
-                    return _context2.stop();
+                    return _context.stop();
                 }
               }
             }, _callee);
           }));
-
           function server(_x) {
             return _server.apply(this, arguments);
           }
-
           return server;
         }(),
         init: function init(_ref2, next) {
           var context = _ref2.context;
           var _ref3 = context.ssrContext,
-              request = _ref3.request;
+            request = _ref3.request;
           context.ssrContext.request = formatServer(request);
           return next({
             context: context
@@ -60,13 +49,11 @@ export var ssr = function ssr() {
         },
         pickContext: function pickContext(_ref4, next) {
           var context = _ref4.context,
-              pickedContext = _ref4.pickedContext;
-
+            pickedContext = _ref4.pickedContext;
           // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
           var _ref5 = context === null || context === void 0 ? void 0 : context.ssrContext,
-              request = _ref5.request,
-              response = _ref5.response;
-
+            request = _ref5.request,
+            response = _ref5.response;
           var initialData = context.initialData;
           return next({
             context: context,

package/dist/js/treeshaking/ssr/prefetch.js

@@ -4,7 +4,6 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { run } from '@modern-js/utils/ssr';
 import { ChunkExtractor } from '@loadable/server';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 // todo: SSRContext
 var prefetch = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(App, context) {
@@ -14,16 +13,13 @@ var prefetch = /*#__PURE__*/function () {
           case 0:
             return _context2.abrupt("return", run(context.ssrContext.request.headers, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
               var _context$store;
-
               var ssrContext, _ref3, loadableStats, extractor, loadersData;
-
               return _regeneratorRuntime().wrap(function _callee$(_context) {
                 while (1) {
                   switch (_context.prev = _context.next) {
                     case 0:
                       ssrContext = context.ssrContext;
                       _ref3 = ssrContext, loadableStats = _ref3.loadableStats;
-
                       if (loadableStats) {
                         extractor = new ChunkExtractor({
                           stats: loadableStats,
@@ -37,26 +33,21 @@ var prefetch = /*#__PURE__*/function () {
                           context: context
                         }));
                       }
-
                       if (context.loaderManager.hasPendingLoaders()) {
                         _context.next = 5;
                         break;
                       }
-
                       return _context.abrupt("return", {
                         initialData: context.initialData,
                         i18nData: context.__i18nData__
                       });
-
                     case 5:
                       _context.next = 7;
                       return context.loaderManager.awaitPendingLoaders();
-
                     case 7:
                       loadersData = _context.sent;
                       Object.keys(loadersData).forEach(function (id) {
                         var data = loadersData[id];
-
                         if (data._error) {
                           ssrContext.logger.error('App Prefetch Loader', data._error);
                           ssrContext.metrics.emitCounter('app.prefetch.loader.error', 1);
@@ -70,7 +61,6 @@ var prefetch = /*#__PURE__*/function () {
                         // todo: move to plugin state
                         storeState: context === null || context === void 0 ? void 0 : (_context$store = context.store) === null || _context$store === void 0 ? void 0 : _context$store.getState()
                       });
-
                     case 10:
                     case "end":
                       return _context.stop();
@@ -78,7 +68,6 @@ var prefetch = /*#__PURE__*/function () {
                 }
               }, _callee);
             }))));
-
           case 1:
           case "end":
             return _context2.stop();
@@ -86,10 +75,8 @@ var prefetch = /*#__PURE__*/function () {
       }
     }, _callee2);
   }));
-
   return function prefetch(_x, _x2) {
     return _ref.apply(this, arguments);
   };
 }();
-
 export default prefetch;

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

@@ -3,10 +3,9 @@ import React, { useEffect, useState } from 'react';
 var csr = false;
 export var NoSSR = function NoSSR(props) {
   var _useState = useState(csr),
-      _useState2 = _slicedToArray(_useState, 2),
-      isMounted = _useState2[0],
-      setMounted = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isMounted = _useState2[0],
+    setMounted = _useState2[1];
   useEffect(function () {
     csr = true;
     setMounted(true);

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>"));
 }