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

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # @modern-js/runtime
 
+## 2.0.0-beta.0
+
+### Major Changes
+
+- dda38c9: chore: v2
+
+### Minor Changes
+
+- c9e800d39: feat: support React18 streaming SSR
+  feat: 支持 React18 流式 SSR
+- 543be95: feat: compile server loader and support handle loader request
+  feat: 编译 server loader 并支持处理 loader 的请求
+
+### Patch Changes
+
+- b18fa8f: feat: remove @loadable/component in streaming ssr
+  feat: 移除 streaming ssr 中的 @loadable/component 逻辑
+- a2509bf: feat: bump esbuild from 0.14.38 to 0.15.7
+
+  feat: 将 esbuild 从 0.14.38 版本升级至 0.15.7 版本
+
+- 4369648ae: fix: fix html template of streaming ssr
+  fix: 修复流式渲染的 html 模版
+- 6bda14ed7: feat: refactor router with react-router@6.4
+
+  feat: 使用 react-router@6.4 重构路由模块
+
+- 60d5378: fix: function extname should not return array
+  fix: 函数 extname 不应该返回一个数组
+- 8b8e1bb57: feat: support nested routes
+  feat: 支持嵌套路由
+- 3bbea92b2: feat: support Hook、Middleware new API
+  feat: 支持 Hook、Middleware 的新 API
+- fcace5b5b: fix: remove overmuch `@modernjs/utils` dependency import in ssr runtime & SSR hydrate error
+  fix: 去除 ssr 运行时过多的 `@modernjs/utils` 依赖引入 & SSR hydrate 错误
+- Updated dependencies [edd1cfb1a]
+- Updated dependencies [cc971eabf]
+- Updated dependencies [5b9049f]
+- Updated dependencies [6bda14ed7]
+- Updated dependencies [b8bbe036c]
+- Updated dependencies [d5a31df78]
+- Updated dependencies [dda38c9]
+- Updated dependencies [102d32e4b]
+- Updated dependencies [8b8e1bb57]
+- Updated dependencies [3bbea92b2]
+- Updated dependencies [abf3421]
+- Updated dependencies [543be95]
+- Updated dependencies [14b712d]
+  - @modern-js/utils@2.0.0-beta.0
+  - @modern-js/types@2.0.0-beta.0
+  - @modern-js/plugin@2.0.0-beta.0
+
 ## 1.21.2
 
 ### Patch Changes

package/dist/js/modern/cli/index.js

@@ -6,7 +6,7 @@ import PluginRouter from "../router/cli";
 export default (() => ({
   name: '@modern-js/runtime',
   post: ['@modern-js/plugin-router', '@modern-js/plugin-ssr', '@modern-js/plugin-state', '@modern-js/plugin-design-token'],
-  usePlugins: [PluginState(), PluginRouter(), PluginSSR()],
+  usePlugins: [PluginState(), PluginSSR(), PluginRouter()],
   setup: api => {
     return {
       config() {

package/dist/js/modern/core/index.js

@@ -2,6 +2,6 @@ export { createPlugin, createRuntime, runtime, registerInit, registerPrefetch }
 export { defineConfig, getConfig } from "./app-config"; // compatible
 
 export * from "./compatible";
-export { RuntimeReactContext } from "../runtime-context";
+export { RuntimeReactContext, ServerRouterContext } from "../runtime-context";
 export * from "./loader";
 export * from '@modern-js/plugin';

package/dist/js/modern/index.js

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

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

@@ -34,11 +34,14 @@ export default (() => ({
         entrypoint,
         imports
       }) {
+        var _userConfig$runtime, _userConfig$runtime$r;
+
         const {
           entryName,
           fileSystemRoutes
         } = entrypoint;
         const userConfig = api.useResolvedConfigContext();
+        const 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);
         const {
           packageName
         } = api.useAppContext();
@@ -46,12 +49,14 @@ export default (() => ({
         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 ${entryName}`);
         }
@@ -66,6 +71,8 @@ export default (() => ({
         entrypoint,
         plugins
       }) {
+        var _userConfig$runtime2, _userConfig$runtime2$;
+
         const {
           entryName,
           fileSystemRoutes
@@ -73,9 +80,11 @@ export default (() => ({
         const {
           serverRoutes
         } = api.useAppContext();
+        const userConfig = api.useResolvedConfigContext();
+        const 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);
         const 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
           const serverBase = serverRoutes.filter(route => route.entryName === entryName).map(route => route.urlPath).sort((a, b) => a.length - b.length > 0 ? -1 : 1);
@@ -96,7 +105,14 @@ export default (() => ({
       },
 
       addRuntimeExports() {
-        pluginsExportsUtils.addExport(`export { default as router } from '@modern-js/runtime/router'`);
+        var _userConfig$runtime3, _userConfig$runtime3$;
+
+        const userConfig = api.useResolvedConfigContext();
+        const 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/modern/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/modern/router/runtime/plugin.js

@@ -4,23 +4,17 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-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 const routerPlugin = ({
   serverBase: _serverBase = [],
-  history: customHistory,
   supportHtml5History: _supportHtml5History = true,
   routesConfig,
-  historyOptions: _historyOptions = {}
+  createRoutes
 }) => {
-  const isBrow = isBrowser();
-
   const select = pathname => _serverBase.find(baseUrl => pathname.search(baseUrl) === 0) || '/';
 
   return {
@@ -30,49 +24,37 @@ export const routerPlugin = ({
         hoc: ({
           App
         }, next) => {
+          // can not get routes config, skip wrapping React Router.
+          // e.g. App.tsx as the entrypoint
+          if (!routesConfig) {
+            return next({
+              App
+            });
+          }
+
           const getRouteApp = () => {
-            if (isBrow) {
+            return props => {
               var _window$_SERVER_DATA;
 
+              const routeElements = renderRoutes(routesConfig);
+              const routes = createRoutes ? createRoutes() : createRoutesFromElements(routeElements);
               const 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;
-              const history = customHistory || (_supportHtml5History ? createBrowserHistory(_historyOptions) : createHashHistory(_historyOptions));
-              return props => /*#__PURE__*/_jsx(Router, {
-                history: history,
-                children: /*#__PURE__*/_jsx(App, _objectSpread(_objectSpread({}, props), {}, {
-                  children: routesConfig ? renderRoutes(routesConfig, props) : null
-                }))
-              });
-            }
-
-            return props => {
-              const runtimeContext = useContext(RuntimeReactContext);
-              const {
-                ssrContext
-              } = runtimeContext;
-              const location = getLocation(ssrContext);
-              const routerContext = (ssrContext === null || ssrContext === void 0 ? void 0 : ssrContext.redirection) || {};
-              const request = ssrContext === null || ssrContext === void 0 ? void 0 : ssrContext.request;
-              const baseUrl = request === null || request === void 0 ? void 0 : request.baseUrl;
-              const 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
-                }))
+              const router = _supportHtml5History ? createBrowserRouter(routes, {
+                basename: baseUrl
+              }) : createHashRouter(routes, {
+                basename: baseUrl
               });
+              return /*#__PURE__*/_jsx(App, _objectSpread(_objectSpread({}, props), {}, {
+                children: /*#__PURE__*/_jsx(RouterProvider, {
+                  router: router
+                })
+              }));
             };
           };
 
-          let RouteApp = getRouteApp();
-
-          if (App) {
-            RouteApp = hoistNonReactStatics(RouteApp, App);
-          }
+          const RouteApp = getRouteApp();
 
-          if (routesConfig !== null && routesConfig !== void 0 && routesConfig.globalApp) {
+          if (routesConfig.globalApp) {
             return next({
               App: hoistNonReactStatics(RouteApp, routesConfig.globalApp)
             });

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

@@ -0,0 +1,143 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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')}`;
+  const origin = `${req.protocol}://${req.host}`; // Note: This had to take originalUrl into account for presumably vite's proxying
+
+  const url = new URL(req.originalUrl || req.url, origin);
+  const controller = new AbortController(); // req.on('close', () => {
+  //   controller.abort();
+  // });
+
+  const 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) {
+  const headers = new Headers();
+
+  for (const [key, values] of Object.entries(requestHeaders)) {
+    if (values) {
+      if (Array.isArray(values)) {
+        for (const value of values) {
+          headers.append(key, value);
+        }
+      } else {
+        headers.set(key, values);
+      }
+    }
+  }
+
+  return headers;
+}
+export const routerPlugin = ({
+  routesConfig,
+  createRoutes
+}) => {
+  return {
+    name: '@modern-js/plugin-router',
+    setup: () => {
+      return {
+        async init({
+          context
+        }, next) {
+          // can not get routes config, skip wrapping React Router.
+          // e.g. App.tsx as the entrypoint
+          if (!routesConfig) {
+            return next({
+              context
+            });
+          }
+
+          const {
+            request
+          } = context.ssrContext;
+          const routeElements = renderRoutes(routesConfig);
+          const routes = createRoutes ? createRoutes() : createRoutesFromElements(routeElements);
+          const {
+            query
+          } = createStaticHandler(routes);
+          const remixRequest = createFetchRequest(request);
+          const routerContext = await query(remixRequest);
+
+          if (routerContext instanceof Response) {
+            // TODO: resolve repsonse ?
+            return next({
+              context
+            });
+          }
+
+          const router = createStaticRouter(routes, routerContext);
+          context.router = router;
+          context.routerContext = routerContext;
+          return next({
+            context
+          });
+        },
+
+        hoc: ({
+          App
+        }, next) => {
+          // can not get routes config, skip wrapping React Router.
+          // e.g. App.tsx as the entrypoint
+          if (!routesConfig) {
+            return next({
+              App
+            });
+          }
+
+          const getRouteApp = () => {
+            return props => {
+              const {
+                router,
+                routerContext
+              } = useContext(RuntimeReactContext);
+              return /*#__PURE__*/_jsx(App, _objectSpread(_objectSpread({}, props), {}, {
+                children: /*#__PURE__*/_jsx(StaticRouterProvider, {
+                  router: router,
+                  context: routerContext,
+                  nonce: "the-nonce"
+                })
+              }));
+            };
+          };
+
+          const RouteApp = getRouteApp();
+
+          if (routesConfig.globalApp) {
+            return next({
+              App: hoistNonReactStatics(RouteApp, routesConfig.globalApp)
+            });
+          }
+
+          return next({
+            App: RouteApp
+          });
+        }
+      };
+    }
+  };
+};

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

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

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

@@ -1,28 +1,80 @@
 const _excluded = ["Component"];
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-// 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, extraProps = {}) {
+
+const renderNestedRoute = (nestedRoute, parent) => {
+  const {
+    children,
+    index,
+    id,
+    component: Component
+  } = nestedRoute;
+  const childElements = children === null || children === void 0 ? void 0 : children.map(childRoute => {
+    return renderNestedRoute(childRoute, nestedRoute);
+  });
+  const 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) {
+    const errorElement = /*#__PURE__*/_jsx(nestedRoute.error, {});
+
+    routeProps.errorElement = errorElement;
+  }
+
+  if (Component) {
+    if (parent !== null && parent !== void 0 && parent.loading) {
+      const 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, {})
+      });
+    }
+  }
+
+  const 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) {
   const Layout = _ref => {
     let {
       Component
     } = _ref,
         props = _objectWithoutProperties(_ref, _excluded);
 
-    const GlobalLayout = routesConfig === null || routesConfig === void 0 ? void 0 : routesConfig.globalApp;
+    const GlobalLayout = globalApp;
 
     if (!GlobalLayout) {
       return /*#__PURE__*/_jsx(Component, _objectSpread({}, props));
@@ -33,38 +85,46 @@ export function renderRoutes(routesConfig, extraProps = {}) {
     }, props));
   };
 
-  const findMatchedRoute = pathname => {
-    var _routesConfig$routes;
+  const routeElements = [];
 
-    return routesConfig === null || routesConfig === void 0 ? void 0 : (_routesConfig$routes = routesConfig.routes) === null || _routesConfig$routes === void 0 ? void 0 : _routesConfig$routes.find(route => {
-      const info = matchPath(pathname, {
+  for (const route of routes) {
+    if (route.type === 'nested') {
+      const routeElement = renderNestedRoute(route);
+      routeElements.push(routeElement);
+    } else {
+      const routeElement = /*#__PURE__*/_jsx(Route, {
         path: route.path,
-        exact: route.exact,
-        sensitive: route.sensitive
-      });
-      return Boolean(info);
-    });
-  };
+        element: /*#__PURE__*/_jsx(Layout, {
+          Component: route.component
+        })
+      }, route.path);
 
-  return /*#__PURE__*/_jsx(Route, {
-    path: "/",
-    render: props => {
-      const matchedRoute = findMatchedRoute(props.location.pathname);
-
-      if (!matchedRoute) {
-        return /*#__PURE__*/_jsx(DefaultNotFound, {});
-      }
-
-      return /*#__PURE__*/_jsx(Route, {
-        path: matchedRoute.path,
-        exact: matchedRoute.exact,
-        sensitive: matchedRoute.sensitive,
-        render: routeProps => /*#__PURE__*/_jsx(Layout, _objectSpread(_objectSpread({
-          Component: matchedRoute.component
-        }, routeProps), extraProps))
-      });
+      routeElements.push(routeElement);
     }
-  });
+  }
+
+  routeElements.push( /*#__PURE__*/_jsx(Route, {
+    path: "*",
+    element: /*#__PURE__*/_jsx(DefaultNotFound, {})
+  }, "*"));
+  return routeElements;
+}
+export function renderRoutes(routesConfig) {
+  if (!routesConfig) {
+    return null;
+  }
+
+  const {
+    routes,
+    globalApp
+  } = routesConfig;
+
+  if (!routes) {
+    return null;
+  }
+
+  const routeElements = getRouteComponents(routes, globalApp);
+  return routeElements;
 }
 export function getLocation(serverContext) {
   var _url$replace;

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

@@ -0,0 +1,22 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+// legacy withRouter
+import React from 'react';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const withRouter = Component => {
+  return props => {
+    const location = useLocation();
+    const params = useParams();
+    const navigate = useNavigate();
+    return /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread({}, props), {}, {
+      location: location,
+      params: params,
+      navigate: navigate
+    }));
+  };
+};

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

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