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

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

@@ -0,0 +1,170 @@
+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 path from 'path';
+import React from 'react';
+import ReactDomServer from 'react-dom/server';
+import { build } from 'esbuild';
+import { createDebugger, findExists } from '@modern-js/utils';
+import { DocumentContext } from "../DocumentContext";
+import { DOCUMENT_SCRIPTS_PLACEHOLDER, DOCUMENT_FILE_NAME, DOCUMENT_META_PLACEHOLDER, PLACEHOLDER_REPLACER_MAP, DOC_EXT, DOCUMENT_SSR_PLACEHOLDER, DOCUMENT_CHUNKSMAP_PLACEHOLDER, DOCUMENT_SSRDATASCRIPT_PLACEHOLDER, HTML_SEPARATOR } from "../constants";
+var debug = createDebugger('html_genarate');
+var getDocumenByEntryName = function getDocumenByEntryName(entrypoints, entryName) {
+  var _entrypoints$find;
+  var entryDir = (_entrypoints$find = entrypoints.find(function (item) {
+    return item.entryName === entryName;
+  })) === null || _entrypoints$find === void 0 ? void 0 : _entrypoints$find.absoluteEntryDir;
+  var docFile = findExists(DOC_EXT.map(function (item) {
+    return "".concat(entryDir).concat(path.sep).concat(DOCUMENT_FILE_NAME, ".").concat(item);
+  }));
+  return docFile || undefined;
+};
+export default (function () {
+  return {
+    name: '@modern-js/plugin-document',
+    pre: ['@modern-js/plugin-analyze'],
+    setup: function () {
+      var _setup = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(api) {
+        var getDocParams, documentEntry;
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                getDocParams = function _getDocParams(params) {
+                  var config = params.config,
+                    templateParameters = params.templateParameters,
+                    entryName = params.entryName;
+                  // for enough params, devide as：process, config, templateParams
+                  return {
+                    processEnv: process.env,
+                    config: {
+                      output: config.output
+                    },
+                    entryName: entryName,
+                    templateParams: templateParameters
+                  };
+                };
+                documentEntry = function documentEntry(entryName, templateParameters) {
+                  var _api$useAppContext = api.useAppContext(),
+                    entrypoints = _api$useAppContext.entrypoints,
+                    internalDirectory = _api$useAppContext.internalDirectory;
+                  // search the document.[tsx|jsx|js|ts] under entry
+                  // if not, use main as default
+                  var documentFilePath = getDocumenByEntryName(entrypoints, entryName);
+                  if (!documentFilePath) {
+                    documentFilePath = getDocumenByEntryName(entrypoints, 'main');
+                  }
+                  // if no document file, do nothing as default
+                  if (!documentFilePath) {
+                    return null;
+                  }
+                  return /*#__PURE__*/function () {
+                    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref) {
+                      var htmlWebpackPlugin, documentParams, htmlOutputFile, Document, HTMLElement, html, scripts, metas;
+                      return _regeneratorRuntime().wrap(function _callee$(_context) {
+                        while (1) {
+                          switch (_context.prev = _context.next) {
+                            case 0:
+                              htmlWebpackPlugin = _ref.htmlWebpackPlugin;
+                              documentParams = getDocParams({
+                                config: api.useConfigContext(),
+                                entryName: entryName,
+                                templateParameters: templateParameters
+                              });
+                              htmlOutputFile = path.join(internalDirectory, "./document/_".concat(entryName, ".html.js")); // transform document file to html string
+                              _context.next = 5;
+                              return build({
+                                entryPoints: [documentFilePath],
+                                // write: false,
+                                outfile: htmlOutputFile,
+                                platform: 'node',
+                                target: 'es6',
+                                loader: {
+                                  '.ts': 'ts',
+                                  '.tsx': 'tsx'
+                                },
+                                bundle: true,
+                                plugins: [{
+                                  name: 'make-all-packages-external',
+                                  setup: function setup(build) {
+                                    // https://github.com/evanw/esbuild/issues/619#issuecomment-751995294
+                                    build.onResolve({
+                                      filter: /^[^./]|^\.[^./]|^\.\.[^/]/
+                                    }, function (args) {
+                                      var external = true;
+                                      // FIXME: windows external entrypoint
+                                      if (args.kind === 'entry-point') {
+                                        external = false;
+                                      }
+                                      return {
+                                        path: args.path,
+                                        external: external
+                                      };
+                                    });
+                                  }
+                                }]
+                              });
+                            case 5:
+                              _context.next = 7;
+                              return import(htmlOutputFile);
+                            case 7:
+                              Document = _context.sent["default"];
+                              HTMLElement = /*#__PURE__*/React.createElement(DocumentContext.Provider, {
+                                value: documentParams
+                              }, /*#__PURE__*/React.createElement(Document, null));
+                              html = ReactDomServer.renderToStaticMarkup(HTMLElement);
+                              debug("entry %s's document jsx rendered html: %o", entryName, html);
+                              scripts = [htmlWebpackPlugin.tags.headTags.filter(function (item) {
+                                return item.tagName === 'script';
+                              }).join(''), htmlWebpackPlugin.tags.bodyTags.toString()].join('');
+                              metas = [templateParameters.meta, htmlWebpackPlugin.tags.headTags.filter(function (item) {
+                                return item.tagName !== 'script';
+                              }).join('')].join(''); // replace the html placeholder while transfer string to jsx component is not a easy way
+                              return _context.abrupt("return", "<!DOCTYPE html>".concat(html).replace(DOCUMENT_META_PLACEHOLDER, metas).replace(DOCUMENT_SSR_PLACEHOLDER, HTML_SEPARATOR).replace(DOCUMENT_SCRIPTS_PLACEHOLDER, scripts).replace(DOCUMENT_CHUNKSMAP_PLACEHOLDER, PLACEHOLDER_REPLACER_MAP[DOCUMENT_CHUNKSMAP_PLACEHOLDER]).replace(DOCUMENT_SSRDATASCRIPT_PLACEHOLDER, PLACEHOLDER_REPLACER_MAP[DOCUMENT_SSRDATASCRIPT_PLACEHOLDER]));
+                            case 14:
+                            case "end":
+                              return _context.stop();
+                          }
+                        }
+                      }, _callee);
+                    }));
+                    return function (_x2) {
+                      return _ref2.apply(this, arguments);
+                    };
+                  }();
+                };
+                return _context2.abrupt("return", {
+                  config: function config() {
+                    return {
+                      tools: {
+                        htmlPlugin: function htmlPlugin(options, entry) {
+                          // just for reuse the baseParames calculate by builder:
+                          // https://github.com/modern-js-dev/modern.js/blob/1abb452a87ae1adbcf8da47d62c05da39cbe4d69/packages/builder/builder-webpack-provider/src/plugins/html.ts#L69-L103
+                          var hackParameters = typeof (options === null || options === void 0 ? void 0 : options.templateParameters) === 'function' ? options === null || options === void 0 ? void 0 : options.templateParameters({}, {}, {}, {}) : _objectSpread({}, options === null || options === void 0 ? void 0 : options.templateParameters);
+                          var templateContent = documentEntry(entry.entryName,
+                          // options,
+                          hackParameters);
+                          var documentHtmlOptions = templateContent ? {
+                            templateContent: templateContent,
+                            inject: false
+                          } : {};
+                          return _objectSpread(_objectSpread({}, options), documentHtmlOptions);
+                        }
+                      }
+                    };
+                  }
+                });
+              case 3:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2);
+      }));
+      function setup(_x) {
+        return _setup.apply(this, arguments);
+      }
+      return setup;
+    }()
+  };
+});

package/dist/js/treeshaking/document/constants.js

@@ -0,0 +1,16 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _PLACEHOLDER_REPLACER;
+export var DOC_EXT = ['jsx', 'tsx', 'ts', 'js'];
+export var DOCUMENT_META_PLACEHOLDER = encodeURIComponent('<%= meta %>');
+export var HTML_SEPARATOR = '<!--<?- html ?>-->';
+export var HTML_CHUNKSMAP_SEPARATOR = '<!--<?- chunksMap.js ?>-->';
+export var HTML_SSRDATASCRIPT_SEPARATOR = '<!--<?- SSRDataScript ?>-->';
+// export const HTML_BOTTOMTPL_SEPARATOR = '<!--<?- bottomTemplate ?>-->'; // document jsx not need bottom
+
+export var DOCUMENT_SSR_PLACEHOLDER = encodeURIComponent(HTML_SEPARATOR);
+export var DOCUMENT_CHUNKSMAP_PLACEHOLDER = encodeURIComponent(HTML_CHUNKSMAP_SEPARATOR);
+export var DOCUMENT_SSRDATASCRIPT_PLACEHOLDER = encodeURIComponent(HTML_SSRDATASCRIPT_SEPARATOR);
+export var DOCUMENT_FILE_NAME = 'document';
+export var DOCUMENT_SCRIPTS_PLACEHOLDER = encodeURIComponent('<!-- chunk scripts placeholder -->');
+export var DOCUMENT_NO_SCRIPTE_PLACEHOLDER = encodeURIComponent('<!-- no-script -->');
+export var PLACEHOLDER_REPLACER_MAP = (_PLACEHOLDER_REPLACER = {}, _defineProperty(_PLACEHOLDER_REPLACER, DOCUMENT_NO_SCRIPTE_PLACEHOLDER, "We're sorry but react app doesn't work properly without JavaScript enabled. Please enable it to continue."), _defineProperty(_PLACEHOLDER_REPLACER, DOCUMENT_SSR_PLACEHOLDER, HTML_SEPARATOR), _defineProperty(_PLACEHOLDER_REPLACER, DOCUMENT_CHUNKSMAP_PLACEHOLDER, HTML_CHUNKSMAP_SEPARATOR), _defineProperty(_PLACEHOLDER_REPLACER, DOCUMENT_SSRDATASCRIPT_PLACEHOLDER, HTML_SSRDATASCRIPT_SEPARATOR), _PLACEHOLDER_REPLACER);

package/dist/js/treeshaking/document/index.js

@@ -0,0 +1,8 @@
+export * from "./Html";
+export * from "./DocumentContext";
+export * from "./DocumentStructrueContext";
+export * from "./Head";
+export * from "./Body";
+export * from "./Root";
+export * from "./Scripts";
+export * from "./constants";

package/dist/js/treeshaking/index.js

@@ -1 +1,2 @@
-export { createApp, createPlugin, useLoader, bootstrap, RuntimeReactContext, registerPrefetch, defineConfig, registerInit, useRuntimeContext } from "./core";
+export { isBrowser } from "./common";
+export { createApp, createPlugin, useLoader, bootstrap, RuntimeReactContext, defineConfig, registerInit, useRuntimeContext } from "./core";

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

@@ -25,46 +25,46 @@ export default (function () {
           return PLUGIN_SCHEMAS['@modern-js/plugin-router'];
         },
         modifyEntryImports: function modifyEntryImports(_ref) {
+          var _userConfig$runtime, _userConfig$runtime$r;
           var entrypoint = _ref.entrypoint,
-              imports = _ref.imports;
+            imports = _ref.imports;
           var entryName = entrypoint.entryName,
-              fileSystemRoutes = entrypoint.fileSystemRoutes;
+            fileSystemRoutes = entrypoint.fileSystemRoutes;
           var userConfig = api.useResolvedConfigContext();
-
+          var isLegacy = Boolean(userConfig === null || userConfig === void 0 ? void 0 : (_userConfig$runtime = userConfig.runtime) === null || _userConfig$runtime === void 0 ? void 0 : (_userConfig$runtime$r = _userConfig$runtime.router) === null || _userConfig$runtime$r === void 0 ? void 0 : _userConfig$runtime$r.legacy);
           var _api$useAppContext = api.useAppContext(),
-              packageName = _api$useAppContext.packageName;
-
+            packageName = _api$useAppContext.packageName;
           var runtimeConfig = getEntryOptions(entryName, userConfig.runtime, userConfig.runtimeByEntries, packageName);
           runtimeConfigMap.set(entryName, runtimeConfig);
-
           if (runtimeConfig !== null && runtimeConfig !== void 0 && runtimeConfig.router) {
-            imports.push({
-              value: '@modern-js/runtime/plugins',
-              specifiers: [{
-                imported: PLUGIN_IDENTIFIER
-              }]
-            });
+            if (!isLegacy) {
+              imports.push({
+                value: '@modern-js/runtime/plugins',
+                specifiers: [{
+                  imported: PLUGIN_IDENTIFIER
+                }]
+              });
+            }
           } else if (fileSystemRoutes) {
             throw new Error("should enable runtime.router for entry ".concat(entryName));
           }
-
           return {
             entrypoint: entrypoint,
             imports: imports
           };
         },
         modifyEntryRuntimePlugins: function modifyEntryRuntimePlugins(_ref2) {
+          var _userConfig$runtime2, _userConfig$runtime2$;
           var entrypoint = _ref2.entrypoint,
-              plugins = _ref2.plugins;
+            plugins = _ref2.plugins;
           var entryName = entrypoint.entryName,
-              fileSystemRoutes = entrypoint.fileSystemRoutes;
-
+            fileSystemRoutes = entrypoint.fileSystemRoutes;
           var _api$useAppContext2 = api.useAppContext(),
-              serverRoutes = _api$useAppContext2.serverRoutes;
-
+            serverRoutes = _api$useAppContext2.serverRoutes;
+          var userConfig = api.useResolvedConfigContext();
+          var isLegacy = Boolean(userConfig === null || userConfig === void 0 ? void 0 : (_userConfig$runtime2 = userConfig.runtime) === null || _userConfig$runtime2 === void 0 ? void 0 : (_userConfig$runtime2$ = _userConfig$runtime2.router) === null || _userConfig$runtime2$ === void 0 ? void 0 : _userConfig$runtime2$.legacy);
           var runtimeConfig = runtimeConfigMap.get(entryName);
-
-          if (runtimeConfig.router) {
+          if (runtimeConfig.router && !isLegacy) {
             // Todo: plugin-router best to only handle manage client route.
             // here support base server route usage, part for compatibility
             var serverBase = serverRoutes.filter(function (route) {
@@ -83,14 +83,18 @@ export default (function () {
               })).replace(/"routesConfig"\s*:\s*"((\S|\s)+)"/g, '"routesConfig": $1,')
             });
           }
-
           return {
             entrypoint: entrypoint,
             plugins: plugins
           };
         },
         addRuntimeExports: function addRuntimeExports() {
-          pluginsExportsUtils.addExport("export { default as router } from '@modern-js/runtime/router'");
+          var _userConfig$runtime3, _userConfig$runtime3$;
+          var userConfig = api.useResolvedConfigContext();
+          var isLegacy = Boolean(userConfig === null || userConfig === void 0 ? void 0 : (_userConfig$runtime3 = userConfig.runtime) === null || _userConfig$runtime3 === void 0 ? void 0 : (_userConfig$runtime3$ = _userConfig$runtime3.router) === null || _userConfig$runtime3$ === void 0 ? void 0 : _userConfig$runtime3$.legacy);
+          if (!isLegacy) {
+            pluginsExportsUtils.addExport("export { default as router } from '@modern-js/runtime/router'");
+          }
         }
       };
     }

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

@@ -1,4 +1,4 @@
 import { routerPlugin } from "./plugin";
 export default routerPlugin;
 export * from 'react-router-dom';
-export * from 'history';
+export * from "./withRouter";

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

@@ -1,84 +1,58 @@
 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();
-
+    serverBase = _ref$serverBase === void 0 ? [] : _ref$serverBase,
+    _ref$supportHtml5Hist = _ref.supportHtml5History,
+    supportHtml5History = _ref$supportHtml5Hist === void 0 ? true : _ref$supportHtml5Hist,
+    routesConfig = _ref.routesConfig,
+    createRoutes = _ref.createRoutes;
   var select = function select(pathname) {
     return serverBase.find(function (baseUrl) {
       return pathname.search(baseUrl) === 0;
     }) || '/';
   };
-
   return {
     name: '@modern-js/plugin-router',
     setup: function setup() {
       return {
         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)
             });
           }
-
           return next({
             App: RouteApp
           });

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

@@ -0,0 +1,161 @@
+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", routerContext);
+                  case 13:
+                    router = createStaticRouter(routes, routerContext);
+                    context.router = router;
+                    context.routerContext = routerContext;
+                    context.routes = routes;
+                    // set routeManifest in context to be consistent with csr context
+                    context.routeManifest = context.ssrContext.routeManifest;
+                    return _context.abrupt("return", next({
+                      context: context
+                    }));
+                  case 19:
+                  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/root/index.js

@@ -0,0 +1,17 @@
+import React, { useContext, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { RuntimeReactContext } from "../../../core";
+import { handleLoad } from "./load";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function RootLayout(props) {
+  var location = useLocation();
+  var context = useContext(RuntimeReactContext);
+  useEffect(function () {
+    var routes = props.routes;
+    handleLoad(routes, location, context.routeManifest);
+  }, [location]);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: props.children
+  });
+}