@modern-js/runtime 1.3.5 → 1.4.0

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

@@ -0,0 +1,129 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import ReactDOM from 'react-dom';
+import { loadableReady } from '@loadable/component';
+import { RenderLevel } from "./serverRender/type";
+import { formatClient, mockResponse } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var ssr = function ssr() {
+  return {
+    name: '@modern-js/plugin-ssr',
+    setup: function setup() {
+      var mockResp = mockResponse();
+      return {
+        client: function () {
+          var _client = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref) {
+            var _window, _window$_SSR_DATA;
+
+            var App, context, rootElement, renderLevel, _prefetch, _ref2;
+
+            return _regeneratorRuntime().wrap(function _callee$(_context) {
+              while (1) {
+                switch (_context.prev = _context.next) {
+                  case 0:
+                    App = _ref.App, context = _ref.context, rootElement = _ref.rootElement;
+                    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;
+
+                    if (!(renderLevel === RenderLevel.CLIENT_RENDER)) {
+                      _context.next = 8;
+                      break;
+                    }
+
+                    _context.next = 5;
+                    return App === null || App === void 0 ? void 0 : (_prefetch = (_ref2 = App).prefetch) === null || _prefetch === void 0 ? void 0 : _prefetch.call(_ref2, context);
+
+                  case 5:
+                    ReactDOM.render( /*#__PURE__*/_jsx(App, {
+                      context: context
+                    }), rootElement);
+                    _context.next = 9;
+                    break;
+
+                  case 8:
+                    if (renderLevel === RenderLevel.SERVER_RENDER) {
+                      loadableReady(function () {
+                        var hydrateContext = _objectSpread(_objectSpread({}, context), {}, {
+                          _hydration: true
+                        });
+
+                        ReactDOM.hydrate( /*#__PURE__*/_jsx(App, {
+                          context: hydrateContext
+                        }), rootElement, function () {
+                          // won't cause component re-render because context's reference identity doesn't change
+                          delete hydrateContext._hydration;
+                        });
+                      });
+                    } else {
+                      // unknown renderlevel or renderlevel is server prefetch.
+                      ReactDOM.render( /*#__PURE__*/_jsx(App, {
+                        context: context
+                      }), rootElement);
+                    }
+
+                  case 9:
+                  case "end":
+                    return _context.stop();
+                }
+              }
+            }, _callee);
+          }));
+
+          function client(_x) {
+            return _client.apply(this, arguments);
+          }
+
+          return client;
+        }(),
+        init: function init(_ref3, next) {
+          var _window2, _window2$_SSR_DATA, _window2$_SSR_DATA$co;
+
+          var context = _ref3.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) {
+            return next({
+              context: context
+            });
+          }
+
+          context.ssrContext.response = mockResp;
+          context.ssrContext.request = formatClient(request);
+          return next({
+            context: context
+          });
+        },
+        pickContext: function pickContext(_ref4, next) {
+          var _window3, _window3$_SSR_DATA, _window3$_SSR_DATA$co;
+
+          var context = _ref4.context,
+              pickedContext = _ref4.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,
+              pickedContext: _objectSpread(_objectSpread({}, pickedContext), {}, {
+                initialData: initialData
+              })
+            });
+          }
+
+          return next({
+            context: context,
+            pickedContext: _objectSpread(_objectSpread({}, pickedContext), {}, {
+              initialData: initialData,
+              request: request,
+              response: mockResp
+            })
+          });
+        }
+      };
+    }
+  };
+};
+
+export default ssr;
+export * from "./react";

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

@@ -0,0 +1,100 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+/* eslint-disable @typescript-eslint/no-require-imports */
+import path from 'path';
+import { registerPrefetch } from '@modern-js/runtime-core';
+import { isBrowser } from "../common";
+import prefetch from "./prefetch";
+import { formatServer } from "./utils";
+var registeredApps = new WeakSet();
+
+var plugin = function plugin() {
+  return {
+    name: '@modern-js/plugin-ssr',
+    setup: function setup() {
+      return {
+        server: function () {
+          var _server = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref) {
+            var App, context, html;
+            return _regeneratorRuntime().wrap(function _callee$(_context2) {
+              while (1) {
+                switch (_context2.prev = _context2.next) {
+                  case 0:
+                    App = _ref.App, context = _ref.context;
+
+                    if (!registeredApps.has(App)) {
+                      registerPrefetch(App, function (_context) {
+                        return prefetch(App, _context);
+                      });
+                      registeredApps.add(App);
+                    }
+
+                    if (isBrowser()) {
+                      _context2.next = 7;
+                      break;
+                    }
+
+                    _context2.next = 5;
+                    return require("./serverRender").render(context, (context === null || context === void 0 ? void 0 : context.ssrContext.distDir) || path.join(process.cwd(), 'dist'), App);
+
+                  case 5:
+                    html = _context2.sent;
+                    return _context2.abrupt("return", html);
+
+                  case 7:
+                    return _context2.abrupt("return", null);
+
+                  case 8:
+                  case "end":
+                    return _context2.stop();
+                }
+              }
+            }, _callee);
+          }));
+
+          function server(_x) {
+            return _server.apply(this, arguments);
+          }
+
+          return server;
+        }(),
+        init: function init(_ref2, next) {
+          var context = _ref2.context;
+          var request = context.ssrContext.request;
+          context.ssrContext.request = formatServer(request);
+          return next({
+            context: context
+          });
+        },
+        pickContext: function pickContext(_ref3, next) {
+          var context = _ref3.context,
+              pickedContext = _ref3.pickedContext;
+
+          var _context$ssrContext = context === null || context === void 0 ? void 0 : context.ssrContext,
+              request = _context$ssrContext.request,
+              response = _context$ssrContext.response;
+
+          var initialData = context.initialData;
+          return next({
+            context: context,
+            pickedContext: _objectSpread(_objectSpread({}, pickedContext), {}, {
+              initialData: initialData,
+              request: request,
+              response: response
+            })
+          });
+        }
+      };
+    }
+  };
+};
+
+export default plugin;
+export * from "./react";
+/* eslint-enable @typescript-eslint/no-require-imports */
+
+/* eslint-enable @typescript-eslint/no-var-requires */

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

@@ -0,0 +1,97 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import path from 'path';
+import fs from 'fs';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { run } from '@modern-js/utils/ssr';
+import { LOADABLE_STATS_FILE } from '@modern-js/utils/constants';
+import { ChunkExtractor } from '@loadable/server'; // todo: SSRContext
+
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var prefetch = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(App, context) {
+    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            return _context2.abrupt("return", run(context.ssrContext.request.headers, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+              var _context$store;
+
+              var ssrContext, loadablefile, extractor, loadersData;
+              return _regeneratorRuntime().wrap(function _callee$(_context) {
+                while (1) {
+                  switch (_context.prev = _context.next) {
+                    case 0:
+                      ssrContext = context.ssrContext;
+                      loadablefile = path.resolve(ssrContext.distDir, LOADABLE_STATS_FILE);
+
+                      if (fs.existsSync(loadablefile)) {
+                        extractor = new ChunkExtractor({
+                          statsFile: path.resolve(ssrContext.distDir, LOADABLE_STATS_FILE),
+                          entrypoints: [ssrContext.entryName].filter(Boolean)
+                        });
+                        renderToStaticMarkup(extractor.collectChunks( /*#__PURE__*/_jsx(App, {
+                          context: context
+                        })));
+                      } else {
+                        renderToStaticMarkup( /*#__PURE__*/_jsx(App, {
+                          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);
+                          delete data._error;
+                        }
+                      });
+                      return _context.abrupt("return", {
+                        loadersData: loadersData,
+                        initialData: context.initialData,
+                        i18nData: context.__i18nData__,
+                        // 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();
+                  }
+                }
+              }, _callee);
+            }))));
+
+          case 1:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+
+  return function prefetch(_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+export default prefetch;

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

@@ -0,0 +1,2 @@
+export { PreRender } from "./prerender";
+export { NoSSR } from "./nossr";

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

@@ -0,0 +1,16 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+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];
+
+  useEffect(function () {
+    csr = true;
+    setMounted(true);
+  });
+  var children = props.children;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isMounted ? children : null);
+};

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

@@ -0,0 +1,119 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import withSideEffect from 'react-side-effect';
+import React, { createElement } from 'react';
+import { getOutermostProperty, aggKeysFromPropsList, exist, aggMatchesFromPropsList } from "./util";
+var PROP_NAMES = {
+  INTERVAL: 'interval',
+  STALE_LIMIT: 'staleLimit',
+  LEVEL: 'level',
+  INCLUDES: 'includes',
+  EXCLUDES: 'excludes',
+  FALLBACK: 'fallback',
+  MATCHES: 'matches'
+};
+
+var handleClientStateChange = function handleClientStateChange() {// not used
+};
+
+var mapStateOnServer = function mapStateOnServer(reduceProps) {
+  var defaultProps = {
+    interval: 10,
+    staleLimit: false,
+    level: 0,
+    includes: null,
+    excludes: null,
+    fallback: false,
+    matches: null
+  };
+  return Object.keys(defaultProps).reduce(function (props, key) {
+    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),
+    staleLimit: getOutermostProperty(propsList, PROP_NAMES.STALE_LIMIT),
+    level: getOutermostProperty(propsList, PROP_NAMES.LEVEL),
+    includes: aggKeysFromPropsList(propsList, PROP_NAMES.INCLUDES),
+    excludes: aggKeysFromPropsList(propsList, PROP_NAMES.EXCLUDES),
+    fallback: getOutermostProperty(propsList, PROP_NAMES.FALLBACK),
+    matches: aggMatchesFromPropsList(propsList, PROP_NAMES.MATCHES)
+  };
+  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() {
+        return true;
+      }
+    }, {
+      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));
+      }
+    }], [{
+      key: "canUseDOM",
+      get: function get() {
+        return Component.canUseDOM;
+      },
+      set: function set(canUseDOM) {
+        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

@@ -0,0 +1,115 @@
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+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;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var props = _step.value;
+
+      if (props.hasOwnProperty(propName)) {
+        return props[propName];
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+
+  return null;
+};
+export var aggKeysFromPropsList = function aggKeysFromPropsList(propsList, propName) {
+  var initResult = REQUEST_META.reduce(function (result, next) {
+    var key = next;
+    result[key] = [];
+    return result;
+  }, {});
+  var res = propsList.filter(function (props) {
+    return usefulObject(props[propName]);
+  }).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]));
+      }
+    });
+    return result;
+  }, 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);
+};
+export var aggMatchesFromPropsList = function aggMatchesFromPropsList(propsList, propName) {
+  var initResult = REQUEST_META.reduce(function (result, next) {
+    var key = next;
+    result[key] = {};
+    return result;
+  }, {});
+  var res = propsList.filter(function (props) {
+    return usefulObject(props[propName]);
+  }).reduce(function (result, next) {
+    REQUEST_META.forEach(function (key) {
+      var prop = next[propName]; // 这边目前是浅拷贝，越后渲染优先级越高
+
+      if (prop !== null && prop !== void 0 && prop.hasOwnProperty(key) && usefulObject(prop[key])) {
+        result[key] = Object.assign(result[key], prop[key]);
+      }
+    });
+    return result;
+  }, 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;
+}