@modern-js/runtime 2.5.0 → 2.7.0

package/dist/cjs/router/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/router/runtime/DefaultNotFound.js

@@ -21,16 +21,19 @@ __export(DefaultNotFound_exports, {
 });
 module.exports = __toCommonJS(DefaultNotFound_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-const DefaultNotFound = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-  style: {
-    margin: "150px auto",
-    textAlign: "center",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  children: "404"
-});
+const DefaultNotFound = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "div",
+  {
+    style: {
+      margin: "150px auto",
+      textAlign: "center",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    children: "404"
+  }
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DefaultNotFound

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

@@ -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
 ));
@@ -79,13 +83,21 @@ 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 });
-              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(App, {
-                ...props,
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.RouterProvider, {
-                  router
-                })
+              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 }) });
             };
           };
           const RouteApp = getRouteApp();

package/dist/cjs/router/runtime/plugin.node.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
 ));
@@ -30,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");
@@ -65,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,
@@ -98,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);
@@ -124,30 +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();