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

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

@@ -1,22 +1,16 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React, { useContext } from 'react';
-import { createBrowserHistory, createHashHistory } from 'history';
-import { Router, StaticRouter } from 'react-router-dom';
+import React from 'react';
+import { createBrowserRouter, createHashRouter, RouterProvider, createRoutesFromElements } from 'react-router-dom';
 import hoistNonReactStatics from 'hoist-non-react-statics';
-import { RuntimeReactContext } from "../../core";
-import { isBrowser } from "../../common";
-import { renderRoutes, getLocation, urlJoin } from "./utils";
+import { renderRoutes } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var routerPlugin = function routerPlugin(_ref) {
   var _ref$serverBase = _ref.serverBase,
       serverBase = _ref$serverBase === void 0 ? [] : _ref$serverBase,
-      customHistory = _ref.history,
       _ref$supportHtml5Hist = _ref.supportHtml5History,
       supportHtml5History = _ref$supportHtml5Hist === void 0 ? true : _ref$supportHtml5Hist,
       routesConfig = _ref.routesConfig,
-      _ref$historyOptions = _ref.historyOptions,
-      historyOptions = _ref$historyOptions === void 0 ? {} : _ref$historyOptions;
-  var isBrow = isBrowser();
+      createRoutes = _ref.createRoutes;
 
   var select = function select(pathname) {
     return serverBase.find(function (baseUrl) {
@@ -31,49 +25,37 @@ export var routerPlugin = function routerPlugin(_ref) {
         hoc: function hoc(_ref2, next) {
           var App = _ref2.App;
 
+          // can not get routes config, skip wrapping React Router.
+          // e.g. App.tsx as the entrypoint
+          if (!routesConfig) {
+            return next({
+              App: App
+            });
+          }
+
           var getRouteApp = function getRouteApp() {
-            if (isBrow) {
+            return function (props) {
               var _window$_SERVER_DATA;
 
+              var routeElements = renderRoutes(routesConfig);
+              var routes = createRoutes ? createRoutes() : createRoutesFromElements(routeElements);
               var baseUrl = ((_window$_SERVER_DATA = window._SERVER_DATA) === null || _window$_SERVER_DATA === void 0 ? void 0 : _window$_SERVER_DATA.router.baseUrl) || select(location.pathname);
-              historyOptions.basename = baseUrl === '/' ? urlJoin(baseUrl, historyOptions.basename) : baseUrl;
-              var history = customHistory || (supportHtml5History ? createBrowserHistory(historyOptions) : createHashHistory(historyOptions));
-              return function (props) {
-                return /*#__PURE__*/_jsx(Router, {
-                  history: history,
-                  children: /*#__PURE__*/_jsx(App, _objectSpread(_objectSpread({}, props), {}, {
-                    children: routesConfig ? renderRoutes(routesConfig, props) : null
-                  }))
-                });
-              };
-            }
-
-            return function (props) {
-              var runtimeContext = useContext(RuntimeReactContext);
-              var ssrContext = runtimeContext.ssrContext;
-              var location = getLocation(ssrContext);
-              var routerContext = (ssrContext === null || ssrContext === void 0 ? void 0 : ssrContext.redirection) || {};
-              var request = ssrContext === null || ssrContext === void 0 ? void 0 : ssrContext.request;
-              var baseUrl = request === null || request === void 0 ? void 0 : request.baseUrl;
-              var basename = baseUrl === '/' ? urlJoin(baseUrl, historyOptions.basename) : baseUrl;
-              return /*#__PURE__*/_jsx(StaticRouter, {
-                basename: basename === '/' ? '' : basename,
-                location: location,
-                context: routerContext,
-                children: /*#__PURE__*/_jsx(App, _objectSpread(_objectSpread({}, props), {}, {
-                  children: routesConfig ? renderRoutes(routesConfig, props) : null
-                }))
+              var router = supportHtml5History ? createBrowserRouter(routes, {
+                basename: baseUrl
+              }) : createHashRouter(routes, {
+                basename: baseUrl
               });
+              return /*#__PURE__*/_jsx(App, _objectSpread(_objectSpread({}, props), {}, {
+                children: /*#__PURE__*/_jsx(RouterProvider, {
+                  router: router
+                })
+              }));
             };
           };
 
           var RouteApp = getRouteApp();
 
-          if (App) {
-            RouteApp = hoistNonReactStatics(RouteApp, App);
-          }
-
-          if (routesConfig !== null && routesConfig !== void 0 && routesConfig.globalApp) {
+          if (routesConfig.globalApp) {
             return next({
               App: hoistNonReactStatics(RouteApp, routesConfig.globalApp)
             });

package/dist/js/treeshaking/router/runtime/plugin.node.js

@@ -0,0 +1,174 @@
+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 _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useContext } from 'react';
+import { unstable_createStaticHandler as createStaticHandler } from '@remix-run/router';
+import { unstable_createStaticRouter as createStaticRouter, unstable_StaticRouterProvider as StaticRouterProvider } from 'react-router-dom/server';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import { installGlobals } from '@remix-run/node';
+import { createRoutesFromElements } from 'react-router-dom';
+import { RuntimeReactContext } from "../../core";
+import { renderRoutes } from "./utils"; // Polyfill Web Fetch API
+
+import { jsx as _jsx } from "react/jsx-runtime";
+installGlobals(); // TODO: polish
+
+function createFetchRequest(req) {
+  // const origin = `${req.protocol}://${req.get('host')}`;
+  var origin = "".concat(req.protocol, "://").concat(req.host); // Note: This had to take originalUrl into account for presumably vite's proxying
+
+  var url = new URL(req.originalUrl || req.url, origin);
+  var controller = new AbortController(); // req.on('close', () => {
+  //   controller.abort();
+  // });
+
+  var init = {
+    method: req.method,
+    headers: createFetchHeaders(req.headers),
+    signal: controller.signal
+  }; // if (req.method !== 'GET' && req.method !== 'HEAD') {
+  //   init.body = req.body;
+  // }
+
+  return new Request(url.href, init);
+}
+
+export function createFetchHeaders(requestHeaders) {
+  var headers = new Headers();
+
+  for (var _i = 0, _Object$entries = Object.entries(requestHeaders); _i < _Object$entries.length; _i++) {
+    var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+        key = _Object$entries$_i[0],
+        values = _Object$entries$_i[1];
+
+    if (values) {
+      if (Array.isArray(values)) {
+        var _iterator = _createForOfIteratorHelper(values),
+            _step;
+
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var value = _step.value;
+            headers.append(key, value);
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      } else {
+        headers.set(key, values);
+      }
+    }
+  }
+
+  return headers;
+}
+export var routerPlugin = function routerPlugin(_ref) {
+  var routesConfig = _ref.routesConfig,
+      createRoutes = _ref.createRoutes;
+  return {
+    name: '@modern-js/plugin-router',
+    setup: function setup() {
+      return {
+        init: function init(_ref2, next) {
+          return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+            var context, _ref3, request, routeElements, routes, _createStaticHandler, query, remixRequest, routerContext, router;
+
+            return _regeneratorRuntime().wrap(function _callee$(_context) {
+              while (1) {
+                switch (_context.prev = _context.next) {
+                  case 0:
+                    context = _ref2.context;
+
+                    if (routesConfig) {
+                      _context.next = 3;
+                      break;
+                    }
+
+                    return _context.abrupt("return", next({
+                      context: context
+                    }));
+
+                  case 3:
+                    _ref3 = context.ssrContext, request = _ref3.request;
+                    routeElements = renderRoutes(routesConfig);
+                    routes = createRoutes ? createRoutes() : createRoutesFromElements(routeElements);
+                    _createStaticHandler = createStaticHandler(routes), query = _createStaticHandler.query;
+                    remixRequest = createFetchRequest(request);
+                    _context.next = 10;
+                    return query(remixRequest);
+
+                  case 10:
+                    routerContext = _context.sent;
+
+                    if (!(routerContext instanceof Response)) {
+                      _context.next = 13;
+                      break;
+                    }
+
+                    return _context.abrupt("return", next({
+                      context: context
+                    }));
+
+                  case 13:
+                    router = createStaticRouter(routes, routerContext);
+                    context.router = router;
+                    context.routerContext = routerContext;
+                    return _context.abrupt("return", next({
+                      context: context
+                    }));
+
+                  case 17:
+                  case "end":
+                    return _context.stop();
+                }
+              }
+            }, _callee);
+          }))();
+        },
+        hoc: function hoc(_ref4, next) {
+          var App = _ref4.App;
+
+          // can not get routes config, skip wrapping React Router.
+          // e.g. App.tsx as the entrypoint
+          if (!routesConfig) {
+            return next({
+              App: App
+            });
+          }
+
+          var getRouteApp = function getRouteApp() {
+            return function (props) {
+              var _useContext = useContext(RuntimeReactContext),
+                  router = _useContext.router,
+                  routerContext = _useContext.routerContext;
+
+              return /*#__PURE__*/_jsx(App, _objectSpread(_objectSpread({}, props), {}, {
+                children: /*#__PURE__*/_jsx(StaticRouterProvider, {
+                  router: router,
+                  context: routerContext,
+                  nonce: "the-nonce"
+                })
+              }));
+            };
+          };
+
+          var RouteApp = getRouteApp();
+
+          if (routesConfig.globalApp) {
+            return next({
+              App: hoistNonReactStatics(RouteApp, routesConfig.globalApp)
+            });
+          }
+
+          return next({
+            App: RouteApp
+          });
+        }
+      };
+    }
+  };
+};

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

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

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

@@ -1,19 +1,68 @@
-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 { 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;
+  }
+
+  if (Component) {
+    if (parent !== null && parent !== void 0 && parent.loading) {
+      var Loading = parent.loading;
+      routeProps.element = /*#__PURE__*/_jsx(Suspense, {
+        fallback: /*#__PURE__*/_jsx(Loading, {}),
+        children: /*#__PURE__*/_jsx(Component, {})
+      });
+    } else {
+      routeProps.element = /*#__PURE__*/_jsx(Suspense, {
+        children: /*#__PURE__*/_jsx(Component, {})
+      });
+    }
+  }
+
+  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;
+    var GlobalLayout = globalApp;
 
     if (!GlobalLayout) {
       return /*#__PURE__*/_jsx(Component, _objectSpread({}, props));
@@ -24,40 +73,55 @@ export function renderRoutes(routesConfig) {
     }, props));
   };
 
-  var findMatchedRoute = function findMatchedRoute(pathname) {
-    var _routesConfig$routes;
+  var routeElements = [];
 
-    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);
-    });
-  };
+  var _iterator = _createForOfIteratorHelper(routes),
+      _step;
 
-  return /*#__PURE__*/_jsx(Route, {
-    path: "/",
-    render: function render(props) {
-      var matchedRoute = findMatchedRoute(props.location.pathname);
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var route = _step.value;
 
-      if (!matchedRoute) {
-        return /*#__PURE__*/_jsx(DefaultNotFound, {});
-      }
+      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);
 
-      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));
-        }
-      });
+        routeElements.push(_routeElement);
+      }
     }
-  });
+  } 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;

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

@@ -0,0 +1,17 @@
+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,31 @@
+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',
@@ -23,9 +49,9 @@ export default (function () {
                     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
@@ -35,7 +61,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'));
                 }
               }
@@ -45,7 +71,8 @@ export default (function () {
         modifyEntryImports: function modifyEntryImports(_ref2) {
           var entrypoint = _ref2.entrypoint,
               imports = _ref2.imports;
-          var entryName = entrypoint.entryName;
+          var entryName = entrypoint.entryName,
+              fileSystemRoutes = entrypoint.fileSystemRoutes;
           var userConfig = api.useResolvedConfigContext();
 
           var _api$useAppContext = api.useAppContext(),
@@ -55,6 +82,21 @@ export default (function () {
           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);
@@ -80,7 +122,7 @@ export default (function () {
           if (ssrConfigMap.get(entrypoint.entryName)) {
             plugins.push({
               name: PLUGIN_IDENTIFIER,
-              options: ssrConfigMap.get(entrypoint.entryName)
+              options: JSON.stringify(ssrConfigMap.get(entrypoint.entryName))
             });
           }