@modern-js/runtime 2.6.0 → 2.7.0

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

@@ -1,6 +1,8 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -14,67 +16,36 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var utils_exports = {};
 __export(utils_exports, {
+  deserializeErrors: () => deserializeErrors,
   getLocation: () => getLocation,
   getRouteComponents: () => getRouteComponents,
   renderRoutes: () => renderRoutes,
+  serializeErrors: () => serializeErrors,
   standardSlash: () => standardSlash,
   urlJoin: () => urlJoin
 });
 module.exports = __toCommonJS(utils_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_nestedRoutes = require("@modern-js/utils/nestedRoutes");
+var import_remix_router = require("@modern-js/utils/remix-router");
 var import_DefaultNotFound = require("./DefaultNotFound");
-const renderNestedRoute = (nestedRoute, parent) => {
-  const { children, index, id, component, isRoot } = nestedRoute;
-  const Component = component;
-  const routeProps = {
-    caseSensitive: nestedRoute.caseSensitive,
-    path: nestedRoute.path,
-    id: nestedRoute.id,
-    loader: createLoader(nestedRoute),
-    action: nestedRoute.action,
-    hasErrorBoundary: nestedRoute.hasErrorBoundary,
-    shouldRevalidate: nestedRoute.shouldRevalidate,
-    handle: nestedRoute.handle,
-    index: nestedRoute.index,
-    element: nestedRoute.element,
-    errorElement: nestedRoute.errorElement
-  };
-  if (nestedRoute.error) {
-    const errorElement = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(nestedRoute.error, {});
-    routeProps.errorElement = errorElement;
-  }
-  let element;
-  if (Component) {
-    if (parent == null ? void 0 : parent.loading) {
-      const Loading = parent.loading;
-      if (isLoadableComponent(Component)) {
-        element = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Loading, {}) });
-      } else {
-        element = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Loading, {}), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {}) });
-      }
-    } else if (isLoadableComponent(Component) || isRoot) {
-      element = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {});
-    } else {
-      element = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {}) });
-    }
-  } else {
-    nestedRoute.loading = parent == null ? void 0 : parent.loading;
-  }
-  if (element) {
-    routeProps.element = element;
-  }
-  const childElements = children == null ? void 0 : children.map((childRoute) => {
-    return renderNestedRoute(childRoute, nestedRoute);
-  });
-  const routeElement = index ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.Route, { ...routeProps, index: true }, id) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.Route, { ...routeProps, index: false, children: childElements }, id);
-  return routeElement;
-};
-function getRouteComponents(routes, globalApp) {
+var import_DeferredDataScripts = __toESM(require("./DeferredDataScripts"));
+function getRouteComponents(routes, {
+  globalApp,
+  ssrMode
+}) {
   const Layout = ({ Component, ...props }) => {
     const GlobalLayout = globalApp;
     if (!GlobalLayout) {
@@ -85,7 +56,9 @@ function getRouteComponents(routes, globalApp) {
   const routeElements = [];
   for (const route of routes) {
     if (route.type === "nested") {
-      const routeElement = renderNestedRoute(route);
+      const routeElement = (0, import_nestedRoutes.renderNestedRoute)(route, {
+        DeferredDataComponent: ssrMode === "stream" ? import_DeferredDataScripts.default : void 0
+      });
       routeElements.push(routeElement);
     } else {
       const routeElement = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -102,7 +75,7 @@ function getRouteComponents(routes, globalApp) {
   routeElements.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.Route, { path: "*", element: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DefaultNotFound.DefaultNotFound, {}) }, "*"));
   return routeElements;
 }
-function renderRoutes(routesConfig) {
+function renderRoutes(routesConfig, ssrMode) {
   if (!routesConfig) {
     return null;
   }
@@ -110,7 +83,7 @@ function renderRoutes(routesConfig) {
   if (!routes) {
     return null;
   }
-  const routeElements = getRouteComponents(routes, globalApp);
+  const routeElements = getRouteComponents(routes, { globalApp, ssrMode });
   return routeElements;
 }
 function getLocation(serverContext) {
@@ -144,32 +117,58 @@ function standardSlash(str) {
   }
   return addr;
 }
-function createLoader(route) {
-  const { loader } = route;
-  if (loader) {
-    return (args) => {
-      if (typeof route.lazyImport === "function") {
-        route.lazyImport();
-      }
-      return loader(args);
-    };
-  } else {
-    return () => {
-      if (typeof route.lazyImport === "function") {
-        route.lazyImport();
-      }
-      return null;
-    };
+function serializeErrors(errors) {
+  if (!errors) {
+    return null;
   }
+  const entries = Object.entries(errors);
+  const serialized = {};
+  for (const [key, val] of entries) {
+    if ((0, import_remix_router.isRouteErrorResponse)(val)) {
+      serialized[key] = { ...val, __type: "RouteErrorResponse" };
+    } else if (val instanceof Error) {
+      serialized[key] = {
+        message: val.message,
+        stack: val.stack,
+        __type: "Error"
+      };
+    } else {
+      serialized[key] = val;
+    }
+  }
+  return serialized;
 }
-function isLoadableComponent(component) {
-  return component && component.displayName === "Loadable" && component.preload && typeof component.preload === "function";
+function deserializeErrors(errors) {
+  if (!errors) {
+    return null;
+  }
+  const entries = Object.entries(errors);
+  const serialized = {};
+  for (const [key, val] of entries) {
+    if (val && val.__type === "RouteErrorResponse") {
+      serialized[key] = new import_remix_router.ErrorResponse(
+        val.status,
+        val.statusText,
+        val.data,
+        val.internal === true
+      );
+    } else if (val && val.__type === "Error") {
+      const error = new Error(val.message);
+      error.stack = val.stack;
+      serialized[key] = error;
+    } else {
+      serialized[key] = val;
+    }
+  }
+  return serialized;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  deserializeErrors,
   getLocation,
   getRouteComponents,
   renderRoutes,
+  serializeErrors,
   standardSlash,
   urlJoin
 });

package/dist/cjs/{runtime-context.js → runtimeContext.js}

@@ -15,12 +15,12 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var runtime_context_exports = {};
-__export(runtime_context_exports, {
+var runtimeContext_exports = {};
+__export(runtimeContext_exports, {
   RuntimeReactContext: () => RuntimeReactContext,
   ServerRouterContext: () => ServerRouterContext
 });
-module.exports = __toCommonJS(runtime_context_exports);
+module.exports = __toCommonJS(runtimeContext_exports);
 var import_react = require("react");
 const RuntimeReactContext = (0, import_react.createContext)({});
 const ServerRouterContext = (0, import_react.createContext)({});

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

@@ -64,6 +64,8 @@ var cli_default = () => ({
         return {
           source: {
             alias: {
+              // ensure that all packages use the same storage in @modern-js/utils/ssr
+              "@modern-js/utils/ssr": require.resolve("@modern-js/utils/ssr"),
               "@modern-js/runtime/plugins": pluginsExportsUtils.getPath()
             }
           },

package/dist/cjs/ssr/index.node.js

@@ -50,6 +50,7 @@ const ssr = (config = {}) => ({
       init({ context }, next) {
         const { request } = context.ssrContext;
         context.ssrContext.request = (0, import_utils.formatServer)(request);
+        context.ssrContext.mode = config.mode;
         return next({ context });
       },
       pickContext: ({ context, pickedContext }, next) => {

package/dist/cjs/ssr/serverRender/renderToStream/buildTemplate.after.js

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,21 +14,13 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var buildTemplate_after_exports = {};
 __export(buildTemplate_after_exports, {
   buildShellAfterTemplate: () => buildShellAfterTemplate
 });
 module.exports = __toCommonJS(buildTemplate_after_exports);
-var import_serialize_javascript = __toESM(require("serialize-javascript"));
+var import_serialize = require("@modern-js/utils/serialize");
 var import_buildTemplate = require("./buildTemplate.share");
 function buildShellAfterTemplate(afterAppTemplate, options) {
   const callbacks = [injectSSRDataScript];
@@ -58,9 +48,7 @@ function buildShellAfterTemplate(afterAppTemplate, options) {
         renderLevel
       };
       return `
-      <script>window._SSR_DATA = ${(0, import_serialize_javascript.default)(SSRData, {
-        isJSON: true
-      })}</script>
+      <script>window._SSR_DATA = ${(0, import_serialize.serializeJson)(SSRData)}</script>
       `;
     }
   }

package/dist/cjs/ssr/serverRender/renderToStream/renderToPipe.js

@@ -22,9 +22,16 @@ __export(renderToPipe_exports, {
 module.exports = __toCommonJS(renderToPipe_exports);
 var import_stream = require("stream");
 var import_types = require("../types");
+var import_common = require("../../../common");
 var import_template = require("./template");
+var ShellChunkStatus = /* @__PURE__ */ ((ShellChunkStatus2) => {
+  ShellChunkStatus2[ShellChunkStatus2["IDLE"] = 0] = "IDLE";
+  ShellChunkStatus2[ShellChunkStatus2["START"] = 1] = "START";
+  ShellChunkStatus2[ShellChunkStatus2["FINIESH"] = 2] = "FINIESH";
+  return ShellChunkStatus2;
+})(ShellChunkStatus || {});
 function renderToPipe(rootElement, context, options) {
-  let isShellStream = true;
+  let shellChunkStatus = 0 /* IDLE */;
   const { ssrContext } = context;
   const forUserPipe = (stream) => {
     return new Promise((resolve) => {
@@ -45,9 +52,20 @@ function renderToPipe(rootElement, context, options) {
           const injectableTransform = new import_stream.Transform({
             transform(chunk, _encoding, callback) {
               try {
-                if (isShellStream) {
-                  this.push(joinChunk(shellBefore, chunk, shellAfter));
-                  isShellStream = false;
+                if (shellChunkStatus !== 2 /* FINIESH */) {
+                  let concatedChunk = chunk.toString();
+                  if (shellChunkStatus === 0 /* IDLE */) {
+                    concatedChunk = `${shellBefore}${concatedChunk}`;
+                    shellChunkStatus = 1 /* START */;
+                  }
+                  if (shellChunkStatus === 1 /* START */ && concatedChunk.endsWith(import_common.ESCAPED_SHELL_STREAM_END_MARK)) {
+                    concatedChunk = concatedChunk.replace(
+                      import_common.ESCAPED_SHELL_STREAM_END_MARK,
+                      shellAfter
+                    );
+                    shellChunkStatus = 2 /* FINIESH */;
+                  }
+                  this.push(concatedChunk);
                 } else {
                   this.push(chunk);
                 }
@@ -90,9 +108,6 @@ function renderToPipe(rootElement, context, options) {
     });
   };
   return forUserPipe;
-  function joinChunk(before = "", chunk, after = "") {
-    return `${before}${chunk.toString()}${after}`;
-  }
 }
 var renderToPipe_default = renderToPipe;
 // Annotate the CommonJS export names for ESM import in node:

package/dist/cjs/ssr/serverRender/renderToStream/template.js

@@ -24,7 +24,7 @@ var import_buildTemplate = require("./buildTemplate.after");
 var import_bulidTemplate = require("./bulidTemplate.before");
 const HTML_SEPARATOR = "<!--<?- html ?>-->";
 const getTemplates = (context, renderLevel) => {
-  const { ssrContext } = context;
+  const { ssrContext, routerContext } = context;
   const [beforeAppTemplate = "", afterAppHtmlTemplate = ""] = ssrContext.template.split(HTML_SEPARATOR) || [];
   const builtBeforeTemplate = (0, import_bulidTemplate.buildShellBeforeTemplate)(
     beforeAppTemplate,
@@ -32,6 +32,7 @@ const getTemplates = (context, renderLevel) => {
   );
   const builtAfterTemplate = (0, import_buildTemplate.buildShellAfterTemplate)(afterAppHtmlTemplate, {
     ssrContext,
+    routerContext,
     renderLevel
   });
   return {

package/dist/cjs/ssr/serverRender/renderToString/entry.js

@@ -32,8 +32,9 @@ __export(entry_exports, {
 module.exports = __toCommonJS(entry_exports);
 var import_react = __toESM(require("react"));
 var import_server = __toESM(require("react-dom/server"));
-var import_serialize_javascript = __toESM(require("serialize-javascript"));
+var import_serialize = require("@modern-js/utils/serialize");
 var import_react_helmet = __toESM(require("react-helmet"));
+var import_utils = require("../../../router/runtime/utils");
 var import_helmet = __toESM(require("../helmet"));
 var import_types = require("../types");
 var import_time = require("../time");
@@ -102,13 +103,18 @@ class Entry {
     if ((_c = ssrContext.redirection) == null ? void 0 : _c.url) {
       return "";
     }
+    const { routerContext } = context;
+    const routerData = routerContext ? {
+      loaderData: routerContext.loaderData,
+      errors: (0, import_utils.serializeErrors)(routerContext.errors)
+    } : void 0;
     let html = "";
     const templateData = buildTemplateData(
       ssrContext,
       prefetchData,
       this.result.renderLevel
     );
-    const SSRData = this.getSSRDataScript(templateData);
+    const SSRData = this.getSSRDataScript(templateData, routerData);
     for (const fragment of this.fragments) {
       if (fragment.isVariable && fragment.content === "SSRDataScript") {
         html += fragment.getValue(SSRData);
@@ -165,13 +171,18 @@ class Entry {
     }
     return html;
   }
-  getSSRDataScript(templateData) {
+  getSSRDataScript(templateData, routerData) {
+    let ssrDataScripts = `<script>window._SSR_DATA = ${(0, import_serialize.serializeJson)(
+      templateData
+    )}</script>`;
+    if (routerData) {
+      ssrDataScripts += `
+<script>window._ROUTER_DATA = ${(0, import_serialize.serializeJson)(
+        routerData
+      )}</script>`;
+    }
     return {
-      SSRDataScript: `
-        <script>window._SSR_DATA = ${(0, import_serialize_javascript.default)(templateData, {
-        isJSON: true
-      })}</script>
-      `
+      SSRDataScript: ssrDataScripts
     };
   }
 }

package/dist/esm/common.js

@@ -1,4 +1,6 @@
 var isBrowser = function() {
     return typeof window !== "undefined" && window.name !== "nodejs";
 };
-export { isBrowser };
+var JSX_SHELL_STREAM_END_MARK = "<!--<?- SHELL_STREAM_END ?>-->";
+var ESCAPED_SHELL_STREAM_END_MARK = "&lt;!--&lt;?- SHELL_STREAM_END ?&gt;--&gt;";
+export { ESCAPED_SHELL_STREAM_END_MARK, JSX_SHELL_STREAM_END_MARK, isBrowser };

package/dist/esm/core/compatible.js

@@ -213,7 +213,7 @@ import { jsx } from "react/jsx-runtime";
 import React, { useContext, useMemo } from "react";
 import hoistNonReactStatics from "hoist-non-react-statics";
 import { ROUTE_MANIFEST } from "@modern-js/utils/constants";
-import { RuntimeReactContext } from "../runtime-context";
+import { RuntimeReactContext } from "../runtimeContext";
 import { runtime } from "./plugin";
 import { createLoaderManager } from "./loader/loaderManager";
 var IS_REACT18 = process.env.IS_REACT18 === "true";

package/dist/esm/core/index.js

@@ -1,7 +1,7 @@
 import { createPlugin, createRuntime, runtime, registerInit } from "./plugin";
-import { defineConfig, getConfig } from "./app-config";
+import { defineConfig, getConfig } from "./appConfig";
 export * from "./compatible";
-import { RuntimeReactContext, ServerRouterContext } from "../runtime-context";
+import { RuntimeReactContext, ServerRouterContext } from "../runtimeContext";
 export * from "./loader";
 export * from "@modern-js/plugin";
 export { RuntimeReactContext, ServerRouterContext, createPlugin, createRuntime, defineConfig, getConfig, registerInit, runtime };

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

@@ -105,7 +105,7 @@ function _unsupportedIterableToArray(o, minLen) {
 }
 import { useContext, useRef, useMemo, useState, useCallback, useEffect } from "react";
 import invariant from "invariant";
-import { RuntimeReactContext } from "../../runtime-context";
+import { RuntimeReactContext } from "../../runtimeContext";
 import { LoaderStatus } from "./loaderManager";
 var useLoader = function(loaderFn) {
     var options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {

package/dist/esm/core/types.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,166 @@
+function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterableToArrayLimit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _nonIterableRest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _slicedToArray(arr, i) {
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Suspense, useEffect, useRef, useMemo, useContext } from "react";
+import { Await, UNSAFE_DataRouterContext as DataRouterContext, useAsyncError } from "react-router-dom";
+import { serializeJson } from "@modern-js/utils/serialize";
+import { JSX_SHELL_STREAM_END_MARK } from "../../common";
+import { serializeErrors } from "./utils";
+var 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}}))};";
+var resolveFnStr = "function r(e,r,o,A){A?_ROUTER_DATA.r[e][r].reject(A):_ROUTER_DATA.r[e][r].resolve(o)};";
+var preResolvedFnStr = "function p(e,r){return void 0!==r?Promise.reject(new Error(r.message)):Promise.resovle(e)};";
+var DeferredDataScripts = function() {
+    var context = useContext(DataRouterContext);
+    var staticContext = (context || {}).staticContext;
+    var hydratedRef = useRef(false);
+    useEffect(function() {
+        hydratedRef.current = true;
+    }, []);
+    var deferredScripts = useMemo(function() {
+        if (!staticContext) {
+            return null;
+        }
+        var activeDeferreds = staticContext.activeDeferreds || [];
+        var _ROUTER_DATA = {
+            loaderData: staticContext.loaderData,
+            errors: serializeErrors(staticContext.errors)
+        };
+        var initialScripts = [
+            "_ROUTER_DATA = ".concat(serializeJson(_ROUTER_DATA), ";"),
+            "_ROUTER_DATA.s = ".concat(setupFnStr),
+            "_ROUTER_DATA.r = ".concat(resolveFnStr),
+            "_ROUTER_DATA.p = ".concat(preResolvedFnStr)
+        ].join("\n");
+        var deferredDataScripts = [];
+        initialScripts += Object.entries(activeDeferreds).map(function(param) {
+            var _param = _slicedToArray(param, 2), routeId = _param[0], deferredData = _param[1];
+            var pendingKeys = new Set(deferredData.pendingKeys);
+            var deferredKeys = deferredData.deferredKeys;
+            var deferredKeyPromiseStr = deferredKeys.map(function(key) {
+                if (pendingKeys.has(key)) {
+                    deferredDataScripts.push(/* @__PURE__ */ jsx(DeferredDataScript, {
+                        data: deferredData.data[key],
+                        dataKey: key,
+                        routeId: routeId
+                    }, "".concat(routeId, " | ").concat(key)));
+                    return "".concat(JSON.stringify(key), ": _ROUTER_DATA.s(").concat(JSON.stringify(routeId), ",").concat(JSON.stringify(key), ") ");
+                } else {
+                    var trackedPromise = deferredData.data[key];
+                    if (typeof trackedPromise._error !== "undefined") {
+                        var error = {
+                            message: trackedPromise._error.message,
+                            stack: process.env.NODE_ENV !== "production" ? trackedPromise._error.stack : void 0
+                        };
+                        return "".concat(JSON.stringify(key), ": _ROUTER_DATA.p(").concat(void 0, ", ").concat(serializeJson(error), ")");
+                    } else {
+                        if (typeof trackedPromise._data === "undefined") {
+                            throw new Error("The deferred data for ".concat(key, " was not resolved, did you forget to return data from a deferred promise"));
+                        }
+                        return "".concat(JSON.stringify(key), ": _ROUTER_DATA.p(").concat(serializeJson(trackedPromise._data), ")");
+                    }
+                }
+            }).join(",\n");
+            return "Object.assign(_ROUTER_DATA.loaderData[".concat(JSON.stringify(routeId), "], {").concat(deferredKeyPromiseStr, "});");
+        }).join("\n");
+        return [
+            initialScripts,
+            deferredDataScripts
+        ];
+    }, []);
+    if (!deferredScripts) {
+        return null;
+    }
+    return /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+            !hydratedRef.current && /* @__PURE__ */ jsx("script", {
+                async: true,
+                suppressHydrationWarning: true,
+                dangerouslySetInnerHTML: {
+                    __html: deferredScripts[0]
+                }
+            }),
+            !hydratedRef.current && deferredScripts[1],
+            JSX_SHELL_STREAM_END_MARK
+        ]
+    });
+};
+var DeferredDataScript = function(param) {
+    var data = param.data, routeId = param.routeId, dataKey = param.dataKey;
+    return /* @__PURE__ */ jsx(Suspense, {
+        children: typeof document === "undefined" && data && dataKey && routeId ? /* @__PURE__ */ jsx(Await, {
+            resolve: data,
+            errorElement: /* @__PURE__ */ jsx(ErrorDeferredDataScript, {
+                routeId: routeId,
+                dataKey: dataKey
+            }),
+            children: function(data2) {
+                return /* @__PURE__ */ jsx("script", {
+                    async: true,
+                    suppressHydrationWarning: true,
+                    dangerouslySetInnerHTML: {
+                        __html: "_ROUTER_DATA.r(".concat(JSON.stringify(routeId), ", ").concat(JSON.stringify(dataKey), ", ").concat(serializeJson(data2), ");")
+                    }
+                });
+            }
+        }) : null
+    });
+};
+var ErrorDeferredDataScript = function(param) {
+    var routeId = param.routeId, dataKey = param.dataKey;
+    var error = useAsyncError();
+    return /* @__PURE__ */ jsx("script", {
+        suppressHydrationWarning: true,
+        dangerouslySetInnerHTML: {
+            __html: "_ROUTER_DATA.r(".concat(JSON.stringify(routeId), ", ").concat(JSON.stringify(dataKey), ", ").concat(void 0, ", ").concat(serializeJson({
+                message: error.message,
+                stack: error.stack
+            }), ");")
+        }
+    });
+};
+var DeferredDataScripts_default = DeferredDataScripts;
+export { DeferredDataScripts_default as default };

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

@@ -1,6 +1,7 @@
 import { routerPlugin } from "./plugin";
 var runtime_default = routerPlugin;
 import { modifyRoutes } from "./plugin";
-export * from "react-router-dom";
 export * from "./withRouter";
-export { runtime_default as default, modifyRoutes };
+import { createBrowserRouter, createHashRouter, createMemoryRouter, RouterProvider, BrowserRouter, HashRouter, MemoryRouter, Router, Await, Form, Link, NavLink, Navigate, Outlet, Route, Routes, ScrollRestoration, 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, createRoutesFromChildren, createRoutesFromElements, createSearchParams, generatePath, isRouteErrorResponse, matchPath, matchRoutes, renderMatches, resolvePath } from "react-router-dom";
+import { defer, json, redirect } from "@modern-js/utils/remix-router";
+export { Await, BrowserRouter, Form, HashRouter, Link, MemoryRouter, NavLink, Navigate, Outlet, Route, Router, RouterProvider, Routes, ScrollRestoration, createBrowserRouter, createHashRouter, createMemoryRouter, createRoutesFromChildren, createRoutesFromElements, createSearchParams, runtime_default as default, 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/esm/router/runtime/plugin.js

@@ -53,7 +53,7 @@ function _objectSpreadProps(target, source) {
 import { jsx } from "react/jsx-runtime";
 import { createBrowserRouter, createHashRouter, RouterProvider, createRoutesFromElements, useMatches, useLocation } from "react-router-dom";
 import hoistNonReactStatics from "hoist-non-react-statics";
-import { renderRoutes, urlJoin } from "./utils";
+import { deserializeErrors, renderRoutes, urlJoin } from "./utils";
 var finalRouteConfig = {
     routes: []
 };
@@ -103,10 +103,18 @@ var routerPlugin = function(param) {
                             var routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes(finalRouteConfig));
                             var baseUrl = ((_window__SERVER_DATA = window._SERVER_DATA) === null || _window__SERVER_DATA === void 0 ? void 0 : _window__SERVER_DATA.router.baseUrl) || select(location.pathname);
                             var _basename = baseUrl === "/" ? urlJoin(baseUrl, basename) : baseUrl;
+                            var hydrationData = window._ROUTER_DATA;
+                            if (hydrationData === null || hydrationData === void 0 ? void 0 : hydrationData.errors) {
+                                hydrationData = _objectSpreadProps(_objectSpread({}, hydrationData), {
+                                    errors: deserializeErrors(hydrationData.errors)
+                                });
+                            }
                             var router = supportHtml5History ? createBrowserRouter(routes, {
-                                basename: _basename
+                                basename: _basename,
+                                hydrationData: hydrationData
                             }) : createHashRouter(routes, {
-                                basename: _basename
+                                basename: _basename,
+                                hydrationData: hydrationData
                             });
                             return /* @__PURE__ */ jsx(App, _objectSpreadProps(_objectSpread({}, props), {
                                 children: /* @__PURE__ */ jsx(RouterProvider, {