@modern-js/runtime 2.6.0 → 2.7.0

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

@@ -0,0 +1,148 @@
+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";
+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 = useContext(DataRouterContext);
+  const { staticContext } = context || {};
+  const hydratedRef = useRef(false);
+  useEffect(() => {
+    hydratedRef.current = true;
+  }, []);
+  const deferredScripts = useMemo(() => {
+    if (!staticContext) {
+      return null;
+    }
+    const activeDeferreds = staticContext.activeDeferreds || [];
+    const _ROUTER_DATA = {
+      loaderData: staticContext.loaderData,
+      errors: serializeErrors(staticContext.errors)
+    };
+    let initialScripts = [
+      `_ROUTER_DATA = ${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__ */ 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}, ${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(${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__ */ 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
+  ] });
+};
+const DeferredDataScript = ({
+  data,
+  routeId,
+  dataKey
+}) => {
+  return /* @__PURE__ */ jsx(Suspense, { children: typeof document === "undefined" && data && dataKey && routeId ? /* @__PURE__ */ jsx(
+    Await,
+    {
+      resolve: data,
+      errorElement: /* @__PURE__ */ jsx(ErrorDeferredDataScript, { routeId, dataKey }),
+      children: (data2) => /* @__PURE__ */ jsx(
+        "script",
+        {
+          async: true,
+          suppressHydrationWarning: true,
+          dangerouslySetInnerHTML: {
+            __html: `_ROUTER_DATA.r(${JSON.stringify(
+              routeId
+            )}, ${JSON.stringify(dataKey)}, ${serializeJson(data2)});`
+          }
+        }
+      )
+    }
+  ) : null });
+};
+const ErrorDeferredDataScript = ({
+  routeId,
+  dataKey
+}) => {
+  const error = useAsyncError();
+  return /* @__PURE__ */ jsx(
+    "script",
+    {
+      suppressHydrationWarning: true,
+      dangerouslySetInnerHTML: {
+        __html: `_ROUTER_DATA.r(${JSON.stringify(routeId)}, ${JSON.stringify(
+          dataKey
+        )}, ${void 0}, ${serializeJson({
+          message: error.message,
+          stack: error.stack
+        })});`
+      }
+    }
+  );
+};
+var DeferredDataScripts_default = DeferredDataScripts;
+export {
+  DeferredDataScripts_default as default
+};

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

@@ -1,9 +1,120 @@
 import { routerPlugin } from "./plugin";
 var runtime_default = routerPlugin;
 import { modifyRoutes } from "./plugin";
-export * from "react-router-dom";
 export * from "./withRouter";
+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,
-  modifyRoutes
+  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-node/router/runtime/plugin.js

@@ -8,7 +8,7 @@ import {
   useLocation
 } from "react-router-dom";
 import hoistNonReactStatics from "hoist-non-react-statics";
-import { renderRoutes, urlJoin } from "./utils";
+import { deserializeErrors, renderRoutes, urlJoin } from "./utils";
 let finalRouteConfig = {
   routes: []
 };
@@ -55,7 +55,20 @@ const routerPlugin = ({
               const routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes(finalRouteConfig));
               const baseUrl = ((_a = window._SERVER_DATA) == null ? void 0 : _a.router.baseUrl) || select(location.pathname);
               const _basename = baseUrl === "/" ? urlJoin(baseUrl, basename) : baseUrl;
-              const router = supportHtml5History ? createBrowserRouter(routes, { basename: _basename }) : createHashRouter(routes, { basename: _basename });
+              let hydrationData = window._ROUTER_DATA;
+              if (hydrationData == null ? void 0 : hydrationData.errors) {
+                hydrationData = {
+                  ...hydrationData,
+                  errors: deserializeErrors(hydrationData.errors)
+                };
+              }
+              const router = supportHtml5History ? createBrowserRouter(routes, {
+                basename: _basename,
+                hydrationData
+              }) : createHashRouter(routes, {
+                basename: _basename,
+                hydrationData
+              });
               return /* @__PURE__ */ jsx(App, { ...props, children: /* @__PURE__ */ jsx(RouterProvider, { router }) });
             };
           };

package/dist/esm-node/router/runtime/plugin.node.js

@@ -1,10 +1,6 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useContext } from "react";
-import serialize from "serialize-javascript";
-import {
-  createStaticHandler,
-  isRouteErrorResponse
-} from "@remix-run/router";
+import { createStaticHandler } from "@modern-js/utils/remix-router";
 import {
   createStaticRouter,
   StaticRouterProvider
@@ -41,26 +37,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 (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,
@@ -74,10 +50,10 @@ 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 === "/" ? urlJoin(baseUrl, basename) : baseUrl;
-          const routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes(routesConfig));
+          const routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes(routesConfig, ssrMode));
           const { query } = createStaticHandler(routes, {
             basename: _basename
           });
@@ -100,33 +76,14 @@ const routerPlugin = ({
           const getRouteApp = () => {
             return (props) => {
               const { router, routerContext } = useContext(RuntimeReactContext);
-              const data = {
-                loaderData: routerContext.loaderData,
-                actionData: routerContext.actionData,
-                errors: serializeErrors(routerContext.errors)
-              };
-              const hydrateScript = `window.__staticRouterHydrationData = ${serialize(
-                data,
-                { isJSON: true }
-              )};`;
-              return /* @__PURE__ */ jsxs(App, { ...props, children: [
-                /* @__PURE__ */ jsx(
-                  StaticRouterProvider,
-                  {
-                    router,
-                    context: routerContext,
-                    hydrate: false
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "script",
-                  {
-                    suppressHydrationWarning: true,
-                    id: "the-nonce",
-                    dangerouslySetInnerHTML: { __html: hydrateScript }
-                  }
-                )
-              ] });
+              return /* @__PURE__ */ jsx(App, { ...props, children: /* @__PURE__ */ jsx(
+                StaticRouterProvider,
+                {
+                  router,
+                  context: routerContext,
+                  hydrate: false
+                }
+              ) });
             };
           };
           const RouteApp = getRouteApp();

package/dist/esm-node/router/runtime/utils.js

@@ -1,54 +1,16 @@
 import { jsx } from "react/jsx-runtime";
-import { Suspense } from "react";
 import { Route } from "react-router-dom";
+import { renderNestedRoute } from "@modern-js/utils/nestedRoutes";
+import {
+  ErrorResponse,
+  isRouteErrorResponse
+} from "@modern-js/utils/remix-router";
 import { DefaultNotFound } from "./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__ */ 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__ */ jsx(Component, { fallback: /* @__PURE__ */ jsx(Loading, {}) });
-      } else {
-        element = /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Loading, {}), children: /* @__PURE__ */ jsx(Component, {}) });
-      }
-    } else if (isLoadableComponent(Component) || isRoot) {
-      element = /* @__PURE__ */ jsx(Component, {});
-    } else {
-      element = /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ 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__ */ jsx(Route, { ...routeProps, index: true }, id) : /* @__PURE__ */ jsx(Route, { ...routeProps, index: false, children: childElements }, id);
-  return routeElement;
-};
-function getRouteComponents(routes, globalApp) {
+import DeferredDataScripts from "./DeferredDataScripts";
+function getRouteComponents(routes, {
+  globalApp,
+  ssrMode
+}) {
   const Layout = ({ Component, ...props }) => {
     const GlobalLayout = globalApp;
     if (!GlobalLayout) {
@@ -59,7 +21,9 @@ function getRouteComponents(routes, globalApp) {
   const routeElements = [];
   for (const route of routes) {
     if (route.type === "nested") {
-      const routeElement = renderNestedRoute(route);
+      const routeElement = renderNestedRoute(route, {
+        DeferredDataComponent: ssrMode === "stream" ? DeferredDataScripts : void 0
+      });
       routeElements.push(routeElement);
     } else {
       const routeElement = /* @__PURE__ */ jsx(
@@ -76,7 +40,7 @@ function getRouteComponents(routes, globalApp) {
   routeElements.push(/* @__PURE__ */ jsx(Route, { path: "*", element: /* @__PURE__ */ jsx(DefaultNotFound, {}) }, "*"));
   return routeElements;
 }
-function renderRoutes(routesConfig) {
+function renderRoutes(routesConfig, ssrMode) {
   if (!routesConfig) {
     return null;
   }
@@ -84,7 +48,7 @@ function renderRoutes(routesConfig) {
   if (!routes) {
     return null;
   }
-  const routeElements = getRouteComponents(routes, globalApp);
+  const routeElements = getRouteComponents(routes, { globalApp, ssrMode });
   return routeElements;
 }
 function getLocation(serverContext) {
@@ -118,31 +82,57 @@ 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 (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 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;
 }
 export {
+  deserializeErrors,
   getLocation,
   getRouteComponents,
   renderRoutes,
+  serializeErrors,
   standardSlash,
   urlJoin
 };

package/dist/esm-node/ssr/cli/index.js

@@ -39,6 +39,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/esm-node/ssr/index.node.js

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

package/dist/esm-node/ssr/serverRender/renderToStream/buildTemplate.after.js

@@ -1,4 +1,4 @@
-import serialize from "serialize-javascript";
+import { serializeJson } from "@modern-js/utils/serialize";
 import { buildTemplate } from "./buildTemplate.share";
 function buildShellAfterTemplate(afterAppTemplate, options) {
   const callbacks = [injectSSRDataScript];
@@ -26,9 +26,7 @@ function buildShellAfterTemplate(afterAppTemplate, options) {
         renderLevel
       };
       return `
-      <script>window._SSR_DATA = ${serialize(SSRData, {
-        isJSON: true
-      })}</script>
+      <script>window._SSR_DATA = ${serializeJson(SSRData)}</script>
       `;
     }
   }

package/dist/esm-node/ssr/serverRender/renderToStream/renderToPipe.js

@@ -1,8 +1,15 @@
 import { Transform } from "stream";
 import { RenderLevel } from "../types";
+import { ESCAPED_SHELL_STREAM_END_MARK } from "../../../common";
 import { getTemplates } from "./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) => {
@@ -23,9 +30,20 @@ function renderToPipe(rootElement, context, options) {
           const injectableTransform = new 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(ESCAPED_SHELL_STREAM_END_MARK)) {
+                    concatedChunk = concatedChunk.replace(
+                      ESCAPED_SHELL_STREAM_END_MARK,
+                      shellAfter
+                    );
+                    shellChunkStatus = 2 /* FINIESH */;
+                  }
+                  this.push(concatedChunk);
                 } else {
                   this.push(chunk);
                 }
@@ -68,9 +86,6 @@ function renderToPipe(rootElement, context, options) {
     });
   };
   return forUserPipe;
-  function joinChunk(before = "", chunk, after = "") {
-    return `${before}${chunk.toString()}${after}`;
-  }
 }
 var renderToPipe_default = renderToPipe;
 export {

package/dist/esm-node/ssr/serverRender/renderToStream/template.js

@@ -2,7 +2,7 @@ import { buildShellAfterTemplate } from "./buildTemplate.after";
 import { buildShellBeforeTemplate } from "./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 = buildShellBeforeTemplate(
     beforeAppTemplate,
@@ -10,6 +10,7 @@ const getTemplates = (context, renderLevel) => {
   );
   const builtAfterTemplate = buildShellAfterTemplate(afterAppHtmlTemplate, {
     ssrContext,
+    routerContext,
     renderLevel
   });
   return {