@modern-js/runtime 2.5.0 → 2.7.0

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

@@ -17,6 +17,10 @@ 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
 ));
@@ -28,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");
@@ -39,7 +44,10 @@ var import_reduce = require("./reduce");
 var loadableRenderer = __toESM(require("./loadable"));
 var styledComponentRenderer = __toESM(require("./styledComponent"));
 const buildTemplateData = (context, data, renderLevel) => {
-  const { request } = context;
+  const { request, enableUnsafeCtx } = context;
+  const unsafeContext = {
+    headers: request.headers
+  };
   return {
     data,
     context: {
@@ -49,8 +57,7 @@ const buildTemplateData = (context, data, renderLevel) => {
         pathname: request.pathname,
         host: request.host,
         url: request.url,
-        headers: request.headers,
-        cookieMap: request.cookieMap
+        ...enableUnsafeCtx ? unsafeContext : {}
       }
     },
     renderLevel
@@ -96,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);
@@ -159,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/cjs/ssr/serverRender/renderToString/index.js

@@ -17,6 +17,10 @@ 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
 ));

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

@@ -58,7 +58,7 @@ const toHtml = (jsx, renderer, next) => {
       }
       chunksMap[fileType] += `<script src="${v.url}" ${props.join(
         " "
-      )}><\/script>`;
+      )}></script>`;
     } else if (fileType === "css") {
       chunksMap[fileType] += `<link href="${v.url}" rel="stylesheet" />`;
     }

package/dist/cjs/ssr/serverRender/time.worker.js

@@ -21,7 +21,7 @@ __export(time_worker_exports, {
 });
 module.exports = __toCommonJS(time_worker_exports);
 function processHrtime(previousTimestamp) {
-  const now = new Date().getTime();
+  const now = (/* @__PURE__ */ new Date()).getTime();
   const clocktime = now * 1e-3;
   let seconds = Math.floor(clocktime);
   let nanoseconds = Math.floor(clocktime % 1 * 1e9);

package/dist/cjs/ssr/serverRender/utils.js

@@ -26,7 +26,7 @@ function getLoadableScripts(extractor) {
   if (!check(scripts)) {
     return "";
   }
-  return scripts.split("<\/script>").slice(0, 2).map((i) => `${i}<\/script>`).join("");
+  return scripts.split("</script>").slice(0, 2).map((i) => `${i}</script>`).join("");
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/ssr/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,6 +16,14 @@ 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, {
@@ -24,6 +34,7 @@ __export(utils_exports, {
   mockResponse: () => mockResponse
 });
 module.exports = __toCommonJS(utils_exports);
+var import_cookie = __toESM(require("cookie"));
 const isReact18 = () => process.env.IS_REACT18 === "true";
 const formatServer = (request) => {
   const {
@@ -33,6 +44,7 @@ const formatServer = (request) => {
   } = request.headers || {};
   return {
     cookie,
+    cookieMap: import_cookie.default.parse(cookie || "") || {},
     userAgent,
     referer,
     ...request
@@ -46,15 +58,15 @@ const getQuery = () => window.location.search.substring(1).split("&").reduce((re
   return res;
 }, {});
 const formatClient = (request) => {
-  var _a, _b;
+  var _a;
   return {
     params: request.params || {},
     host: request.host || location.host,
     pathname: request.pathname || location.pathname,
     headers: request.headers || {},
-    cookieMap: request.cookieMap || {},
-    cookie: ((_a = request.headers) == null ? void 0 : _a.cookie) || document.cookie,
-    userAgent: ((_b = request.headers) == null ? void 0 : _b["user-agent"]) || navigator.userAgent,
+    cookieMap: import_cookie.default.parse(document.cookie || "") || {},
+    cookie: document.cookie || "",
+    userAgent: ((_a = request.headers) == null ? void 0 : _a["user-agent"]) || navigator.userAgent,
     referer: request.referer || document.referrer,
     query: request.query || getQuery(),
     url: location.href

package/dist/cjs/state/index.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 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
 ));

package/dist/cjs/state/plugins.js

@@ -17,6 +17,10 @@ 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
 ));

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

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 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
 ));

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

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 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
 ));
@@ -70,13 +74,7 @@ const state = (config) => ({
       hoc({ App }, next) {
         const getStateApp = (props) => {
           const context = (0, import_react.useContext)(import_core.RuntimeReactContext);
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Provider, {
-            store: context.store,
-            config: storeConfig,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(App, {
-              ...props
-            })
-          });
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Provider, { store: context.store, config: storeConfig, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(App, { ...props }) });
         };
         return next({
           App: (0, import_hoist_non_react_statics.default)(getStateApp, App)

package/dist/esm/cli/index.js

@@ -154,7 +154,11 @@ var cli_default = function() {
                         runtimeByEntries: {},
                         source: {
                             alias: {
-                                "styled-components": require.resolve("styled-components")
+                                /**
+               * twin.macro inserts styled-components into the code during the compilation process
+               * But it will not be installed under the user project.
+               * So need to add alias
+               */ "styled-components": require.resolve("styled-components")
                             },
                             globalVars: {
                                 "process.env.IS_REACT18": process.env.IS_REACT18

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/{app-config.js → appConfig.js}

@@ -1,6 +1,8 @@
 var APP_CONFIG_SYMBOL = "config";
 var getConfig = function(Component) {
-    return Component[APP_CONFIG_SYMBOL];
+    return(// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    Component[APP_CONFIG_SYMBOL]);
 };
 var defineConfig = function(Component, config) {
     Component[APP_CONFIG_SYMBOL] = config;

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";
@@ -419,11 +419,13 @@ var bootstrap = function() {
                         isBrowser: false,
                         loaderManager: createLoaderManager({}, {
                             skipNonStatic: id.staticGenerate,
+                            // if not static generate, only non-static loader can exec on prod env
                             skipStatic: process.env.NODE_ENV === "production" && !id.staticGenerate
                         })
                     });
                     isRedirectResponse = function(result) {
-                        if (typeof Response !== "undefined" && _instanceof(result, Response) && result.status >= 300 && result.status <= 399) {
+                        if (typeof Response !== "undefined" && // fix: ssg workflow doesn't inject Web Response
+                        _instanceof(result, Response) && result.status >= 300 && result.status <= 399) {
                             var status = result.status;
                             var redirectUrl = result.headers.get("Location") || "/";
                             var ssrContext = context.ssrContext;

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/loaderManager.js

@@ -266,6 +266,7 @@ var createLoader = function(id) {
             reloading: hasLoaded && status === 1 /* loading */ ,
             data: data,
             error: _instanceof(error, Error) ? "".concat(error.message) : error,
+            // redundant fields for ssr log
             _error: error
         };
     };
@@ -306,7 +307,8 @@ var createLoaderManager = function(initialDataMap) {
             var skipExec = ignoreNonStatic || ignoreStatic;
             loader = createLoader(id, typeof initialDataMap[id] !== "undefined" ? initialDataMap[id] : {
                 data: loaderOptions.initialData
-            }, loaderFn, skipExec);
+            }, loaderFn, // Todo whether static loader is exec when CSR
+            skipExec);
             loadersMap.set(id, loader);
         }
         return id;

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/document/cli/index.js

@@ -236,7 +236,7 @@ var cli_default = function() {
                                         case 0:
                                             htmlWebpackPlugin = param.htmlWebpackPlugin;
                                             documentParams = getDocParams({
-                                                config: api.useConfigContext(),
+                                                config: api.useResolvedConfigContext(),
                                                 entryName: entryName,
                                                 templateParameters: templateParameters
                                             });
@@ -285,6 +285,7 @@ var cli_default = function() {
                                                     ],
                                                     outfile: htmlOutputFile,
                                                     platform: "node",
+                                                    // change esbuild use the rootDir tsconfig.json as default to tempTsConfigFile
                                                     tsconfig: tempTsConfigFile,
                                                     target: "es6",
                                                     loader: {
@@ -370,7 +371,8 @@ var cli_default = function() {
                                     tools: {
                                         htmlPlugin: function(options, entry) {
                                             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, hackParameters);
+                                            var templateContent = documentEntry(entry.entryName, // options,
+                                            hackParameters);
                                             var documentHtmlOptions = templateContent ? {
                                                 templateContent: templateContent,
                                                 inject: false

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

@@ -50,13 +50,9 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-import { getEntryOptions, createRuntimeExportsUtils, PLUGIN_SCHEMAS } from "@modern-js/utils";
+import { getEntryOptions, createRuntimeExportsUtils, PLUGIN_SCHEMAS, isRouterV5 as isV5 } from "@modern-js/utils";
 var PLUGIN_IDENTIFIER = "router";
 var ROUTES_IDENTIFIER = "routes";
-var isV5 = function(config) {
-    var _config_runtime, _config_runtime_router;
-    return (config === null || config === void 0 ? void 0 : (_config_runtime = config.runtime) === null || _config_runtime === void 0 ? void 0 : (_config_runtime_router = _config_runtime.router) === null || _config_runtime_router === void 0 ? void 0 : _config_runtime_router.mode) === "react-router-5";
-};
 var cli_default = function() {
     return {
         name: "@modern-js/plugin-router",

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, {