@modern-js/runtime 2.6.0 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @modern-js/runtime
 
+## 2.7.0
+
+### Minor Changes
+
+- dcad887024: feat: support deferred data for streaming ssr
+  feat: 流式渲染支持 deferred data
+
+### Patch Changes
+
+- a4672f7c16: fix: lock @modern-js/utils/ssr by webpack alias
+  fix: 通过 webpack 别名将 @modern-js/utils/ssr 锁到同一版本
+- 7fff9020e1: chore: make file naming consistent
+
+  chore: 统一文件命名为小驼峰格式
+
+- 1eea234fdd: chore: make test files naming consistent
+
+  chore: 统一测试文件命名为小驼峰格式
+
+- Updated dependencies [0f15fc597c]
+- Updated dependencies [dcad887024]
+- Updated dependencies [a4672f7c16]
+- Updated dependencies [7fff9020e1]
+- Updated dependencies [84bfb439b8]
+  - @modern-js/utils@2.7.0
+  - @modern-js/types@2.7.0
+  - @modern-js/plugin@2.7.0
+
 ## 2.6.0
 
 ### Patch Changes

package/dist/cjs/common.js

@@ -17,11 +17,17 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var common_exports = {};
 __export(common_exports, {
+  ESCAPED_SHELL_STREAM_END_MARK: () => ESCAPED_SHELL_STREAM_END_MARK,
+  JSX_SHELL_STREAM_END_MARK: () => JSX_SHELL_STREAM_END_MARK,
   isBrowser: () => isBrowser
 });
 module.exports = __toCommonJS(common_exports);
 const isBrowser = () => typeof window !== "undefined" && window.name !== "nodejs";
+const JSX_SHELL_STREAM_END_MARK = "<!--<?- SHELL_STREAM_END ?>-->";
+const ESCAPED_SHELL_STREAM_END_MARK = "&lt;!--&lt;?- SHELL_STREAM_END ?&gt;--&gt;";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ESCAPED_SHELL_STREAM_END_MARK,
+  JSX_SHELL_STREAM_END_MARK,
   isBrowser
 });

package/dist/cjs/core/{app-config.js → appConfig.js}

@@ -15,12 +15,12 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var app_config_exports = {};
-__export(app_config_exports, {
+var appConfig_exports = {};
+__export(appConfig_exports, {
   defineConfig: () => defineConfig,
   getConfig: () => getConfig
 });
-module.exports = __toCommonJS(app_config_exports);
+module.exports = __toCommonJS(appConfig_exports);
 const APP_CONFIG_SYMBOL = "config";
 const getConfig = (Component) => (
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment

package/dist/cjs/core/compatible.js

@@ -36,7 +36,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_hoist_non_react_statics = __toESM(require("hoist-non-react-statics"));
 var import_constants = require("@modern-js/utils/constants");
-var import_runtime_context = require("../runtime-context");
+var import_runtimeContext = require("../runtimeContext");
 var import_plugin = require("./plugin");
 var import_loaderManager = require("./loader/loaderManager");
 const IS_REACT18 = process.env.IS_REACT18 === "true";
@@ -61,7 +61,7 @@ const createApp = ({ plugins }) => {
         { ...props },
         props.children
       );
-      const context = (0, import_react.useContext)(import_runtime_context.RuntimeReactContext);
+      const context = (0, import_react.useContext)(import_runtimeContext.RuntimeReactContext);
       return runner.provide(
         { element, props: { ...props }, context },
         {
@@ -90,7 +90,7 @@ const createApp = ({ plugins }) => {
                 }
               );
             }
-            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_runtime_context.RuntimeReactContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(App2, { ...props }) });
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_runtimeContext.RuntimeReactContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(App2, { ...props }) });
           };
           return (0, import_hoist_non_react_statics.default)(WrapComponent, App2);
         }
@@ -250,7 +250,7 @@ const bootstrap = async (BootApp, id, root, ReactDOM) => {
   }
 };
 const useRuntimeContext = () => {
-  const context = (0, import_react.useContext)(import_runtime_context.RuntimeReactContext);
+  const context = (0, import_react.useContext)(import_runtimeContext.RuntimeReactContext);
   const memoizedContext = (0, import_react.useMemo)(
     () => context.runner.pickContext(
       { context, pickedContext: {} },

package/dist/cjs/core/index.js

@@ -18,20 +18,20 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var core_exports = {};
 __export(core_exports, {
-  RuntimeReactContext: () => import_runtime_context.RuntimeReactContext,
-  ServerRouterContext: () => import_runtime_context.ServerRouterContext,
+  RuntimeReactContext: () => import_runtimeContext.RuntimeReactContext,
+  ServerRouterContext: () => import_runtimeContext.ServerRouterContext,
   createPlugin: () => import_plugin.createPlugin,
   createRuntime: () => import_plugin.createRuntime,
-  defineConfig: () => import_app_config.defineConfig,
-  getConfig: () => import_app_config.getConfig,
+  defineConfig: () => import_appConfig.defineConfig,
+  getConfig: () => import_appConfig.getConfig,
   registerInit: () => import_plugin.registerInit,
   runtime: () => import_plugin.runtime
 });
 module.exports = __toCommonJS(core_exports);
 var import_plugin = require("./plugin");
-var import_app_config = require("./app-config");
+var import_appConfig = require("./appConfig");
 __reExport(core_exports, require("./compatible"), module.exports);
-var import_runtime_context = require("../runtime-context");
+var import_runtimeContext = require("../runtimeContext");
 __reExport(core_exports, require("./loader"), module.exports);
 __reExport(core_exports, require("@modern-js/plugin"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:

package/dist/cjs/core/loader/useLoader.js

@@ -32,10 +32,10 @@ __export(useLoader_exports, {
 module.exports = __toCommonJS(useLoader_exports);
 var import_react = require("react");
 var import_invariant = __toESM(require("invariant"));
-var import_runtime_context = require("../../runtime-context");
+var import_runtimeContext = require("../../runtimeContext");
 var import_loaderManager = require("./loaderManager");
 const useLoader = (loaderFn, options = { params: void 0 }) => {
-  const context = (0, import_react.useContext)(import_runtime_context.RuntimeReactContext);
+  const context = (0, import_react.useContext)(import_runtimeContext.RuntimeReactContext);
   const isSSRRender = Boolean(context.ssr);
   const { loaderManager } = context;
   const loaderRef = (0, import_react.useRef)();

package/dist/cjs/core/types.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/dist/cjs/router/runtime/DeferredDataScripts.js

@@ -0,0 +1,165 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DeferredDataScripts_exports = {};
+__export(DeferredDataScripts_exports, {
+  default: () => DeferredDataScripts_default
+});
+module.exports = __toCommonJS(DeferredDataScripts_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react_router_dom = require("react-router-dom");
+var import_serialize = require("@modern-js/utils/serialize");
+var import_common = require("../../common");
+var import_utils = require("./utils");
+const setupFnStr = `function s(r,e){_ROUTER_DATA.r=_ROUTER_DATA.r||{},_ROUTER_DATA.r[r]=_ROUTER_DATA.r[r]||{};return new Promise((function(A,R){_ROUTER_DATA.r[r][e]={resolve:A,reject:R}}))};`;
+const resolveFnStr = `function r(e,r,o,A){A?_ROUTER_DATA.r[e][r].reject(A):_ROUTER_DATA.r[e][r].resolve(o)};`;
+const preResolvedFnStr = `function p(e,r){return void 0!==r?Promise.reject(new Error(r.message)):Promise.resovle(e)};`;
+const DeferredDataScripts = () => {
+  const context = (0, import_react.useContext)(import_react_router_dom.UNSAFE_DataRouterContext);
+  const { staticContext } = context || {};
+  const hydratedRef = (0, import_react.useRef)(false);
+  (0, import_react.useEffect)(() => {
+    hydratedRef.current = true;
+  }, []);
+  const deferredScripts = (0, import_react.useMemo)(() => {
+    if (!staticContext) {
+      return null;
+    }
+    const activeDeferreds = staticContext.activeDeferreds || [];
+    const _ROUTER_DATA = {
+      loaderData: staticContext.loaderData,
+      errors: (0, import_utils.serializeErrors)(staticContext.errors)
+    };
+    let initialScripts = [
+      `_ROUTER_DATA = ${(0, import_serialize.serializeJson)(_ROUTER_DATA)};`,
+      `_ROUTER_DATA.s = ${setupFnStr}`,
+      `_ROUTER_DATA.r = ${resolveFnStr}`,
+      `_ROUTER_DATA.p = ${preResolvedFnStr}`
+    ].join("\n");
+    const deferredDataScripts = [];
+    initialScripts += Object.entries(activeDeferreds).map(([routeId, deferredData]) => {
+      const pendingKeys = new Set(deferredData.pendingKeys);
+      const { deferredKeys } = deferredData;
+      const deferredKeyPromiseStr = deferredKeys.map((key) => {
+        if (pendingKeys.has(key)) {
+          deferredDataScripts.push(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              DeferredDataScript,
+              {
+                data: deferredData.data[key],
+                dataKey: key,
+                routeId
+              },
+              `${routeId} | ${key}`
+            )
+          );
+          return `${JSON.stringify(key)}: _ROUTER_DATA.s(${JSON.stringify(
+            routeId
+          )},${JSON.stringify(key)}) `;
+        } else {
+          const trackedPromise = deferredData.data[key];
+          if (typeof trackedPromise._error !== "undefined") {
+            const error = {
+              message: trackedPromise._error.message,
+              stack: process.env.NODE_ENV !== "production" ? trackedPromise._error.stack : void 0
+            };
+            return `${JSON.stringify(
+              key
+            )}: _ROUTER_DATA.p(${void 0}, ${(0, import_serialize.serializeJson)(error)})`;
+          } else {
+            if (typeof trackedPromise._data === "undefined") {
+              throw new Error(
+                `The deferred data for ${key} was not resolved, did you forget to return data from a deferred promise`
+              );
+            }
+            return `${JSON.stringify(key)}: _ROUTER_DATA.p(${(0, import_serialize.serializeJson)(
+              trackedPromise._data
+            )})`;
+          }
+        }
+      }).join(",\n");
+      return `Object.assign(_ROUTER_DATA.loaderData[${JSON.stringify(
+        routeId
+      )}], {${deferredKeyPromiseStr}});`;
+    }).join("\n");
+    return [initialScripts, deferredDataScripts];
+  }, []);
+  if (!deferredScripts) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    !hydratedRef.current && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "script",
+      {
+        async: true,
+        suppressHydrationWarning: true,
+        dangerouslySetInnerHTML: { __html: deferredScripts[0] }
+      }
+    ),
+    !hydratedRef.current && deferredScripts[1],
+    import_common.JSX_SHELL_STREAM_END_MARK
+  ] });
+};
+const DeferredDataScript = ({
+  data,
+  routeId,
+  dataKey
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { children: typeof document === "undefined" && data && dataKey && routeId ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_router_dom.Await,
+    {
+      resolve: data,
+      errorElement: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorDeferredDataScript, { routeId, dataKey }),
+      children: (data2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "script",
+        {
+          async: true,
+          suppressHydrationWarning: true,
+          dangerouslySetInnerHTML: {
+            __html: `_ROUTER_DATA.r(${JSON.stringify(
+              routeId
+            )}, ${JSON.stringify(dataKey)}, ${(0, import_serialize.serializeJson)(data2)});`
+          }
+        }
+      )
+    }
+  ) : null });
+};
+const ErrorDeferredDataScript = ({
+  routeId,
+  dataKey
+}) => {
+  const error = (0, import_react_router_dom.useAsyncError)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "script",
+    {
+      suppressHydrationWarning: true,
+      dangerouslySetInnerHTML: {
+        __html: `_ROUTER_DATA.r(${JSON.stringify(routeId)}, ${JSON.stringify(
+          dataKey
+        )}, ${void 0}, ${(0, import_serialize.serializeJson)({
+          message: error.message,
+          stack: error.stack
+        })});`
+      }
+    }
+  );
+};
+var DeferredDataScripts_default = DeferredDataScripts;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

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

@@ -18,16 +18,129 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var runtime_exports = {};
 __export(runtime_exports, {
+  Await: () => import_react_router_dom.Await,
+  BrowserRouter: () => import_react_router_dom.BrowserRouter,
+  Form: () => import_react_router_dom.Form,
+  HashRouter: () => import_react_router_dom.HashRouter,
+  Link: () => import_react_router_dom.Link,
+  MemoryRouter: () => import_react_router_dom.MemoryRouter,
+  NavLink: () => import_react_router_dom.NavLink,
+  Navigate: () => import_react_router_dom.Navigate,
+  Outlet: () => import_react_router_dom.Outlet,
+  Route: () => import_react_router_dom.Route,
+  Router: () => import_react_router_dom.Router,
+  RouterProvider: () => import_react_router_dom.RouterProvider,
+  Routes: () => import_react_router_dom.Routes,
+  ScrollRestoration: () => import_react_router_dom.ScrollRestoration,
+  createBrowserRouter: () => import_react_router_dom.createBrowserRouter,
+  createHashRouter: () => import_react_router_dom.createHashRouter,
+  createMemoryRouter: () => import_react_router_dom.createMemoryRouter,
+  createRoutesFromChildren: () => import_react_router_dom.createRoutesFromChildren,
+  createRoutesFromElements: () => import_react_router_dom.createRoutesFromElements,
+  createSearchParams: () => import_react_router_dom.createSearchParams,
   default: () => runtime_default,
-  modifyRoutes: () => import_plugin2.modifyRoutes
+  defer: () => import_remix_router.defer,
+  generatePath: () => import_react_router_dom.generatePath,
+  isRouteErrorResponse: () => import_react_router_dom.isRouteErrorResponse,
+  json: () => import_remix_router.json,
+  matchPath: () => import_react_router_dom.matchPath,
+  matchRoutes: () => import_react_router_dom.matchRoutes,
+  modifyRoutes: () => import_plugin2.modifyRoutes,
+  redirect: () => import_remix_router.redirect,
+  renderMatches: () => import_react_router_dom.renderMatches,
+  resolvePath: () => import_react_router_dom.resolvePath,
+  useActionData: () => import_react_router_dom.useActionData,
+  useAsyncError: () => import_react_router_dom.useAsyncError,
+  useAsyncValue: () => import_react_router_dom.useAsyncValue,
+  useBeforeUnload: () => import_react_router_dom.useBeforeUnload,
+  useFetcher: () => import_react_router_dom.useFetcher,
+  useFetchers: () => import_react_router_dom.useFetchers,
+  useFormAction: () => import_react_router_dom.useFormAction,
+  useHref: () => import_react_router_dom.useHref,
+  useInRouterContext: () => import_react_router_dom.useInRouterContext,
+  useLinkClickHandler: () => import_react_router_dom.useLinkClickHandler,
+  useLoaderData: () => import_react_router_dom.useLoaderData,
+  useLocation: () => import_react_router_dom.useLocation,
+  useMatch: () => import_react_router_dom.useMatch,
+  useMatches: () => import_react_router_dom.useMatches,
+  useNavigate: () => import_react_router_dom.useNavigate,
+  useNavigation: () => import_react_router_dom.useNavigation,
+  useNavigationType: () => import_react_router_dom.useNavigationType,
+  useOutlet: () => import_react_router_dom.useOutlet,
+  useOutletContext: () => import_react_router_dom.useOutletContext,
+  useParams: () => import_react_router_dom.useParams,
+  useResolvedPath: () => import_react_router_dom.useResolvedPath,
+  useRevalidator: () => import_react_router_dom.useRevalidator,
+  useRouteError: () => import_react_router_dom.useRouteError,
+  useRouteLoaderData: () => import_react_router_dom.useRouteLoaderData,
+  useRoutes: () => import_react_router_dom.useRoutes,
+  useSearchParams: () => import_react_router_dom.useSearchParams,
+  useSubmit: () => import_react_router_dom.useSubmit
 });
 module.exports = __toCommonJS(runtime_exports);
 var import_plugin = require("./plugin");
 var import_plugin2 = require("./plugin");
-__reExport(runtime_exports, require("react-router-dom"), module.exports);
 __reExport(runtime_exports, require("./withRouter"), module.exports);
+var import_react_router_dom = require("react-router-dom");
+var import_remix_router = require("@modern-js/utils/remix-router");
 var runtime_default = import_plugin.routerPlugin;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  modifyRoutes
+  Await,
+  BrowserRouter,
+  Form,
+  HashRouter,
+  Link,
+  MemoryRouter,
+  NavLink,
+  Navigate,
+  Outlet,
+  Route,
+  Router,
+  RouterProvider,
+  Routes,
+  ScrollRestoration,
+  createBrowserRouter,
+  createHashRouter,
+  createMemoryRouter,
+  createRoutesFromChildren,
+  createRoutesFromElements,
+  createSearchParams,
+  defer,
+  generatePath,
+  isRouteErrorResponse,
+  json,
+  matchPath,
+  matchRoutes,
+  modifyRoutes,
+  redirect,
+  renderMatches,
+  resolvePath,
+  useActionData,
+  useAsyncError,
+  useAsyncValue,
+  useBeforeUnload,
+  useFetcher,
+  useFetchers,
+  useFormAction,
+  useHref,
+  useInRouterContext,
+  useLinkClickHandler,
+  useLoaderData,
+  useLocation,
+  useMatch,
+  useMatches,
+  useNavigate,
+  useNavigation,
+  useNavigationType,
+  useOutlet,
+  useOutletContext,
+  useParams,
+  useResolvedPath,
+  useRevalidator,
+  useRouteError,
+  useRouteLoaderData,
+  useRoutes,
+  useSearchParams,
+  useSubmit
 });

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

@@ -83,7 +83,20 @@ const routerPlugin = ({
               const routes = createRoutes ? createRoutes() : (0, import_react_router_dom.createRoutesFromElements)((0, import_utils.renderRoutes)(finalRouteConfig));
               const baseUrl = ((_a = window._SERVER_DATA) == null ? void 0 : _a.router.baseUrl) || select(location.pathname);
               const _basename = baseUrl === "/" ? (0, import_utils.urlJoin)(baseUrl, basename) : baseUrl;
-              const router = supportHtml5History ? (0, import_react_router_dom.createBrowserRouter)(routes, { basename: _basename }) : (0, import_react_router_dom.createHashRouter)(routes, { basename: _basename });
+              let hydrationData = window._ROUTER_DATA;
+              if (hydrationData == null ? void 0 : hydrationData.errors) {
+                hydrationData = {
+                  ...hydrationData,
+                  errors: (0, import_utils.deserializeErrors)(hydrationData.errors)
+                };
+              }
+              const router = supportHtml5History ? (0, import_react_router_dom.createBrowserRouter)(routes, {
+                basename: _basename,
+                hydrationData
+              }) : (0, import_react_router_dom.createHashRouter)(routes, {
+                basename: _basename,
+                hydrationData
+              });
               return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(App, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.RouterProvider, { router }) });
             };
           };

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

@@ -34,8 +34,7 @@ __export(plugin_node_exports, {
 module.exports = __toCommonJS(plugin_node_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_serialize_javascript = __toESM(require("serialize-javascript"));
-var import_router = require("@remix-run/router");
+var import_remix_router = require("@modern-js/utils/remix-router");
 var import_server = require("react-router-dom/server");
 var import_hoist_non_react_statics = __toESM(require("hoist-non-react-statics"));
 var import_react_router_dom = require("react-router-dom");
@@ -69,26 +68,6 @@ function createFetchHeaders(requestHeaders) {
   }
   return headers;
 }
-function serializeErrors(errors) {
-  if (!errors) {
-    return null;
-  }
-  const entries = Object.entries(errors);
-  const serialized = {};
-  for (const [key, val] of entries) {
-    if ((0, import_router.isRouteErrorResponse)(val)) {
-      serialized[key] = { ...val, __type: "RouteErrorResponse" };
-    } else if (val instanceof Error) {
-      serialized[key] = {
-        message: val.message,
-        __type: "Error"
-      };
-    } else {
-      serialized[key] = val;
-    }
-  }
-  return serialized;
-}
 const routerPlugin = ({
   basename = "",
   routesConfig,
@@ -102,11 +81,11 @@ const routerPlugin = ({
           if (!routesConfig && !createRoutes) {
             return next({ context });
           }
-          const { request } = context.ssrContext;
+          const { request, mode: ssrMode } = context.ssrContext;
           const baseUrl = request.baseUrl;
           const _basename = baseUrl === "/" ? (0, import_utils.urlJoin)(baseUrl, basename) : baseUrl;
-          const routes = createRoutes ? createRoutes() : (0, import_react_router_dom.createRoutesFromElements)((0, import_utils.renderRoutes)(routesConfig));
-          const { query } = (0, import_router.createStaticHandler)(routes, {
+          const routes = createRoutes ? createRoutes() : (0, import_react_router_dom.createRoutesFromElements)((0, import_utils.renderRoutes)(routesConfig, ssrMode));
+          const { query } = (0, import_remix_router.createStaticHandler)(routes, {
             basename: _basename
           });
           const remixRequest = createFetchRequest(request);
@@ -128,33 +107,14 @@ const routerPlugin = ({
           const getRouteApp = () => {
             return (props) => {
               const { router, routerContext } = (0, import_react.useContext)(import_core.RuntimeReactContext);
-              const data = {
-                loaderData: routerContext.loaderData,
-                actionData: routerContext.actionData,
-                errors: serializeErrors(routerContext.errors)
-              };
-              const hydrateScript = `window.__staticRouterHydrationData = ${(0, import_serialize_javascript.default)(
-                data,
-                { isJSON: true }
-              )};`;
-              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(App, { ...props, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_server.StaticRouterProvider,
-                  {
-                    router,
-                    context: routerContext,
-                    hydrate: false
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "script",
-                  {
-                    suppressHydrationWarning: true,
-                    id: "the-nonce",
-                    dangerouslySetInnerHTML: { __html: hydrateScript }
-                  }
-                )
-              ] });
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(App, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_server.StaticRouterProvider,
+                {
+                  router,
+                  context: routerContext,
+                  hydrate: false
+                }
+              ) });
             };
           };
           const RouteApp = getRouteApp();