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

package/dist/js/treeshaking/router/runtime/root/load.js

@@ -0,0 +1,102 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+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 { matchRoutes } from 'react-router-dom';
+var Logger = /*#__PURE__*/function () {
+  function Logger(options) {
+    _classCallCheck(this, Logger);
+    _defineProperty(this, "enableLogging", void 0);
+    this.enableLogging = options.enableLogging;
+  }
+  _createClass(Logger, [{
+    key: "log",
+    value: function log() {
+      if (this.enableLogging) {
+        var _console;
+        // eslint-disable-next-line no-console
+        (_console = console).log.apply(_console, arguments);
+      }
+    }
+  }], [{
+    key: "getLogger",
+    value: function getLogger(options) {
+      if (this.logger) {
+        return this.logger;
+      }
+      this.logger = new Logger(options);
+      return this.logger;
+    }
+  }]);
+  return Logger;
+}();
+_defineProperty(Logger, "logger", void 0);
+export function handleLoad(routes, location, routeManifest) {
+  if (!routeManifest || !routeManifest.enableFetchParallel === false) {
+    return;
+  }
+  var routeAssets = routeManifest.routeAssets;
+  Logger.getLogger({
+    enableLogging: routeManifest.enableLogging
+  }).log('handle page load');
+  var matches = matchClientRoutes(routes, location);
+  matches === null || matches === void 0 ? void 0 : matches.forEach(function (match) {
+    return loadRouteModule(match.route, routeAssets);
+  });
+}
+export function matchClientRoutes(routes, location) {
+  var matches = matchRoutes(routes, location);
+  return matches;
+}
+export function loadRouteModule(_x, _x2) {
+  return _loadRouteModule.apply(this, arguments);
+}
+function _loadRouteModule() {
+  _loadRouteModule = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(route, routeAssets) {
+    var routeId, chunkIds;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            routeId = route.id;
+            if (routeId) {
+              _context.next = 3;
+              break;
+            }
+            return _context.abrupt("return");
+          case 3:
+            if (routeAssets[routeId]) {
+              _context.next = 5;
+              break;
+            }
+            return _context.abrupt("return");
+          case 5:
+            chunkIds = routeAssets[routeId].chunkIds;
+            if (chunkIds) {
+              _context.next = 8;
+              break;
+            }
+            return _context.abrupt("return");
+          case 8:
+            _context.prev = 8;
+            _context.next = 11;
+            return Promise.all(chunkIds.map(function (chunkId) {
+              return __webpack_chunk_load__(String(chunkId));
+            }));
+          case 11:
+            _context.next = 16;
+            break;
+          case 13:
+            _context.prev = 13;
+            _context.t0 = _context["catch"](8);
+            console.error(_context.t0);
+          case 16:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[8, 13]]);
+  }));
+  return _loadRouteModule.apply(this, arguments);
+}

package/dist/js/treeshaking/router/runtime/types.js

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

package/dist/js/treeshaking/router/runtime/utils.js

@@ -1,108 +1,154 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 var _excluded = ["Component"];
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import React from 'react';
-import { Route, matchPath } from 'react-router-dom';
+import React, { Suspense } from 'react';
+import { Route } from 'react-router-dom';
 import { DefaultNotFound } from "./DefaultNotFound";
+import { RootLayout } from "./root";
 import { jsx as _jsx } from "react/jsx-runtime";
-export function renderRoutes(routesConfig) {
-  var extraProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
+var renderNestedRoute = function renderNestedRoute(nestedRoute, parent) {
+  var children = nestedRoute.children,
+    index = nestedRoute.index,
+    id = nestedRoute.id,
+    Component = nestedRoute.component;
+  var childElements = children === null || children === void 0 ? void 0 : children.map(function (childRoute) {
+    return renderNestedRoute(childRoute, nestedRoute);
+  });
+  var routeProps = {
+    caseSensitive: nestedRoute.caseSensitive,
+    path: nestedRoute.path,
+    id: nestedRoute.id,
+    loader: nestedRoute.loader,
+    action: nestedRoute.action,
+    hasErrorBoundary: nestedRoute.hasErrorBoundary,
+    shouldRevalidate: nestedRoute.shouldRevalidate,
+    handle: nestedRoute.handle,
+    index: nestedRoute.index,
+    errorElement: nestedRoute.errorElement
+  };
+  if (nestedRoute.error) {
+    var errorElement = /*#__PURE__*/_jsx(nestedRoute.error, {});
+    routeProps.errorElement = errorElement;
+  }
+  var element;
+  if (Component) {
+    if (parent !== null && parent !== void 0 && parent.loading) {
+      var Loading = parent.loading;
+      element = /*#__PURE__*/_jsx(Suspense, {
+        fallback: /*#__PURE__*/_jsx(Loading, {}),
+        children: /*#__PURE__*/_jsx(Component, {})
+      });
+    } else {
+      element = /*#__PURE__*/_jsx(Suspense, {
+        children: /*#__PURE__*/_jsx(Component, {})
+      });
+    }
+  }
+  if (!parent) {
+    element = /*#__PURE__*/_jsx(RootLayout, {
+      routes: [nestedRoute],
+      children: /*#__PURE__*/_jsx(Suspense, {
+        children: element
+      })
+    });
+  }
+  routeProps.element = element;
+  var routeElement = index ? /*#__PURE__*/_jsx(Route, _objectSpread(_objectSpread({}, routeProps), {}, {
+    index: true
+  }), id) : /*#__PURE__*/_jsx(Route, _objectSpread(_objectSpread({}, routeProps), {}, {
+    index: false,
+    children: childElements
+  }), id);
+  return routeElement;
+};
+export function getRouteComponents(routes, globalApp) {
   var Layout = function Layout(_ref) {
     var Component = _ref.Component,
-        props = _objectWithoutProperties(_ref, _excluded);
-
-    var GlobalLayout = routesConfig === null || routesConfig === void 0 ? void 0 : routesConfig.globalApp;
-
+      props = _objectWithoutProperties(_ref, _excluded);
+    var GlobalLayout = globalApp;
     if (!GlobalLayout) {
       return /*#__PURE__*/_jsx(Component, _objectSpread({}, props));
     }
-
     return /*#__PURE__*/_jsx(GlobalLayout, _objectSpread({
       Component: Component
     }, props));
   };
-
-  var findMatchedRoute = function findMatchedRoute(pathname) {
-    var _routesConfig$routes;
-
-    return routesConfig === null || routesConfig === void 0 ? void 0 : (_routesConfig$routes = routesConfig.routes) === null || _routesConfig$routes === void 0 ? void 0 : _routesConfig$routes.find(function (route) {
-      var info = matchPath(pathname, {
-        path: route.path,
-        exact: route.exact,
-        sensitive: route.sensitive
-      });
-      return Boolean(info);
-    });
-  };
-
-  return /*#__PURE__*/_jsx(Route, {
-    path: "/",
-    render: function render(props) {
-      var matchedRoute = findMatchedRoute(props.location.pathname);
-
-      if (!matchedRoute) {
-        return /*#__PURE__*/_jsx(DefaultNotFound, {});
+  var routeElements = [];
+  var _iterator = _createForOfIteratorHelper(routes),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var route = _step.value;
+      if (route.type === 'nested') {
+        var routeElement = renderNestedRoute(route);
+        routeElements.push(routeElement);
+      } else {
+        var _routeElement = /*#__PURE__*/_jsx(Route, {
+          path: route.path,
+          element: /*#__PURE__*/_jsx(Layout, {
+            Component: route.component
+          })
+        }, route.path);
+        routeElements.push(_routeElement);
       }
-
-      return /*#__PURE__*/_jsx(Route, {
-        path: matchedRoute.path,
-        exact: matchedRoute.exact,
-        sensitive: matchedRoute.sensitive,
-        render: function render(routeProps) {
-          return /*#__PURE__*/_jsx(Layout, _objectSpread(_objectSpread({
-            Component: matchedRoute.component
-          }, routeProps), extraProps));
-        }
-      });
     }
-  });
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  routeElements.push( /*#__PURE__*/_jsx(Route, {
+    path: "*",
+    element: /*#__PURE__*/_jsx(DefaultNotFound, {})
+  }, "*"));
+  return routeElements;
+}
+export function renderRoutes(routesConfig) {
+  if (!routesConfig) {
+    return null;
+  }
+  var routes = routesConfig.routes,
+    globalApp = routesConfig.globalApp;
+  if (!routes) {
+    return null;
+  }
+  var routeElements = getRouteComponents(routes, globalApp);
+  return routeElements;
 }
 export function getLocation(serverContext) {
   var _url$replace;
-
   var _ref2 = (serverContext === null || serverContext === void 0 ? void 0 : serverContext.request) || {},
-      pathname = _ref2.pathname,
-      url = _ref2.url;
-
+    pathname = _ref2.pathname,
+    url = _ref2.url;
   var cleanUrl = url === null || url === void 0 ? void 0 : (_url$replace = url.replace('http://', '')) === null || _url$replace === void 0 ? void 0 : _url$replace.replace('https://', '');
   var index = (cleanUrl || '').indexOf(pathname);
-
   if (index === -1) {
     return pathname;
   }
-
   return cleanUrl.substring(index);
 }
 export var urlJoin = function urlJoin() {
   var separator = '/';
   var replace = new RegExp("".concat(separator, "{1,}"), 'g');
-
   for (var _len = arguments.length, parts = new Array(_len), _key = 0; _key < _len; _key++) {
     parts[_key] = arguments[_key];
   }
-
   return standardSlash(parts.join(separator).replace(replace, separator));
 };
 export function standardSlash(str) {
   var addr = str;
-
   if (!addr || typeof addr !== 'string') {
     return addr;
   }
-
   if (addr.startsWith('.')) {
     addr = addr.slice(1);
   }
-
   if (!addr.startsWith('/')) {
     addr = "/".concat(addr);
   }
-
   if (addr.endsWith('/') && addr !== '/') {
     addr = addr.slice(0, addr.length - 1);
   }
-
   return addr;
 }

package/dist/js/treeshaking/router/runtime/withRouter.js

@@ -0,0 +1,18 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+// legacy withRouter
+
+import React from 'react';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var withRouter = function withRouter(Component) {
+  return function (props) {
+    var location = useLocation();
+    var params = useParams();
+    var navigate = useNavigate();
+    return /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread({}, props), {}, {
+      location: location,
+      params: params,
+      navigate: navigate
+    }));
+  };
+};

package/dist/js/treeshaking/runtime-context.js

@@ -1,2 +1,3 @@
 import { createContext } from 'react';
-export var RuntimeReactContext = /*#__PURE__*/createContext({});
+export var RuntimeReactContext = /*#__PURE__*/createContext({});
+export var ServerRouterContext = /*#__PURE__*/createContext({});

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

@@ -1,5 +1,24 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
 import { getEntryOptions, SERVER_RENDER_FUNCTION_NAME, LOADABLE_STATS_FILE, isUseSSRBundle, createRuntimeExportsUtils, isSingleEntry } from '@modern-js/utils';
 var PLUGIN_IDENTIFIER = 'ssr';
+var hasStringSSREntry = function hasStringSSREntry(userConfig) {
+  var isStreaming = function isStreaming(ssr) {
+    return ssr && _typeof(ssr) === 'object' && ssr.mode === 'stream';
+  };
+  var server = userConfig.server;
+  if (server !== null && server !== void 0 && server.ssr && !isStreaming(server.ssr)) {
+    return true;
+  }
+  if (server !== null && server !== void 0 && server.ssrByEntries && _typeof(server.ssrByEntries) === 'object') {
+    for (var _i = 0, _Object$keys = Object.keys(server.ssrByEntries); _i < _Object$keys.length; _i++) {
+      var name = _Object$keys[_i];
+      if (!isStreaming(server.ssrByEntries[name])) {
+        return true;
+      }
+    }
+  }
+  return false;
+};
 export default (function () {
   return {
     name: '@modern-js/plugin-ssr',
@@ -20,13 +39,11 @@ export default (function () {
             tools: {
               webpackChain: function webpackChain(chain, _ref) {
                 var name = _ref.name,
-                    CHAIN_ID = _ref.CHAIN_ID;
+                  CHAIN_ID = _ref.CHAIN_ID;
                 var userConfig = api.useResolvedConfigContext();
-
-                if (isUseSSRBundle(userConfig) && name !== 'server') {
+                if (isUseSSRBundle(userConfig) && name !== 'server' && hasStringSSREntry(userConfig)) {
                   // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
-                  var LoadableWebpackPlugin = require('@modern-js/webpack/@loadable/webpack-plugin');
-
+                  var LoadableWebpackPlugin = require('@loadable/webpack-plugin');
                   chain.plugin(CHAIN_ID.PLUGIN.LOADABLE).use(LoadableWebpackPlugin, [{
                     filename: LOADABLE_STATS_FILE
                   }]);
@@ -34,8 +51,7 @@ export default (function () {
               },
               babel: function babel(config) {
                 var userConfig = api.useResolvedConfigContext();
-
-                if (isUseSSRBundle(userConfig)) {
+                if (isUseSSRBundle(userConfig) && hasStringSSREntry(userConfig)) {
                   config.plugins.push(require.resolve('@loadable/babel-plugin'));
                 }
               }
@@ -44,21 +60,30 @@ export default (function () {
         },
         modifyEntryImports: function modifyEntryImports(_ref2) {
           var entrypoint = _ref2.entrypoint,
-              imports = _ref2.imports;
-          var entryName = entrypoint.entryName;
+            imports = _ref2.imports;
+          var entryName = entrypoint.entryName,
+            fileSystemRoutes = entrypoint.fileSystemRoutes;
           var userConfig = api.useResolvedConfigContext();
-
           var _api$useAppContext = api.useAppContext(),
-              packageName = _api$useAppContext.packageName,
-              entrypoints = _api$useAppContext.entrypoints;
-
-          pluginsExportsUtils.addExport("export { default as ssr } from '@modern-js/runtime/ssr'"); // if use ssg then set ssr config to true
+            packageName = _api$useAppContext.packageName,
+            entrypoints = _api$useAppContext.entrypoints;
+          pluginsExportsUtils.addExport("export { default as ssr } from '@modern-js/runtime/ssr'");
 
+          // if use ssg then set ssr config to true
           var ssrConfig = getEntryOptions(entryName, userConfig.server.ssr, userConfig.server.ssrByEntries, packageName);
+          if (_typeof(ssrConfig) === 'object' && ssrConfig.mode === 'stream') {
+            var _runtimeConfig$router;
+            var runtimeConfig = getEntryOptions(entryName, userConfig.runtime, userConfig.runtimeByEntries, packageName);
+            if (runtimeConfig !== null && runtimeConfig !== void 0 && (_runtimeConfig$router = runtimeConfig.router) !== null && _runtimeConfig$router !== void 0 && _runtimeConfig$router.legacy) {
+              throw new Error("Legacy router plugin doesn't support streaming SSR, check your config 'runtime.router'");
+            }
+            if (fileSystemRoutes && !entrypoint.nestedRoutesEntry) {
+              throw new Error("You should switch to file-system based router to support streaming SSR.");
+            }
+          }
           var ssgConfig = userConfig.output.ssg;
           var useSSG = isSingleEntry(entrypoints) ? Boolean(ssgConfig) : ssgConfig === true || typeof (ssgConfig === null || ssgConfig === void 0 ? void 0 : ssgConfig[0]) === 'function' || Boolean(ssgConfig === null || ssgConfig === void 0 ? void 0 : ssgConfig[entryName]);
           ssrConfigMap.set(entryName, ssrConfig || useSSG);
-
           if (ssrConfig || useSSG) {
             imports.push({
               value: '@modern-js/runtime/plugins',
@@ -67,7 +92,6 @@ export default (function () {
               }]
             });
           }
-
           return {
             entrypoint: entrypoint,
             imports: imports
@@ -75,15 +99,13 @@ export default (function () {
         },
         modifyEntryRuntimePlugins: function modifyEntryRuntimePlugins(_ref3) {
           var entrypoint = _ref3.entrypoint,
-              plugins = _ref3.plugins;
-
+            plugins = _ref3.plugins;
           if (ssrConfigMap.get(entrypoint.entryName)) {
             plugins.push({
               name: PLUGIN_IDENTIFIER,
-              options: ssrConfigMap.get(entrypoint.entryName)
+              options: JSON.stringify(ssrConfigMap.get(entrypoint.entryName))
             });
           }
-
           return {
             entrypoint: entrypoint,
             plugins: plugins
@@ -91,15 +113,13 @@ export default (function () {
         },
         modifyEntryExport: function modifyEntryExport(_ref4) {
           var entrypoint = _ref4.entrypoint,
-              exportStatement = _ref4.exportStatement;
-
+            exportStatement = _ref4.exportStatement;
           if (ssrConfigMap.get(entrypoint.entryName)) {
             return {
               entrypoint: entrypoint,
               exportStatement: ["export function ".concat(SERVER_RENDER_FUNCTION_NAME, "(context) {\n              return bootstrap(AppWrapper, context)\n            }"), exportStatement].join('\n')
             };
           }
-
           return {
             entrypoint: entrypoint,
             exportStatement: exportStatement