@modern-js/runtime 2.8.0 → 2.10.0

package/dist/esm-node/router/runtime/DeferredDataScripts.node.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.resolve(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_node_default = DeferredDataScripts;
+export {
+  DeferredDataScripts_node_default as default
+};

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

@@ -1,5 +1,13 @@
 import { isReact18 } from "../utils";
+import { CSS_CHUNKS_PLACEHOLDER } from "./utils";
 async function serverRender(options) {
+  var _a, _b;
+  if ((_a = options.context.ssrContext) == null ? void 0 : _a.template) {
+    options.context.ssrContext.template = (_b = options.context.ssrContext) == null ? void 0 : _b.template.replace(
+      "</head>",
+      `${CSS_CHUNKS_PLACEHOLDER}</head>`
+    );
+  }
   if (isReact18() && options.config.mode === "stream") {
     const pipe = await require("./renderToStream").render(options);
     return pipe;

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

@@ -7,12 +7,19 @@ function buildShellAfterTemplate(afterAppTemplate, options) {
     const ssrDataScript = buildSSRDataScript();
     return template.replace("<!--<?- SSRDataScript ?>-->", ssrDataScript);
     function buildSSRDataScript() {
-      const { ssrContext, renderLevel } = options;
+      const {
+        context: { ssrContext, initialData, __i18nData__ },
+        renderLevel
+      } = options;
       const { request, enableUnsafeCtx } = ssrContext;
       const unsafeContext = {
         headers: request.headers
       };
       const SSRData = {
+        data: {
+          initialData,
+          i18nData: __i18nData__
+        },
         context: {
           request: {
             params: request.params,

package/dist/esm-node/ssr/serverRender/renderToStream/bulidTemplate.before.js

@@ -1,11 +1,11 @@
 import ReactHelmet from "react-helmet";
 import { matchRoutes } from "react-router-dom";
 import helmetReplace from "../helmet";
+import { CSS_CHUNKS_PLACEHOLDER } from "../utils";
 import {
   HEAD_REG_EXP,
   buildTemplate
 } from "./buildTemplate.share";
-const CSS_CHUNKS_PLACEHOLDER = "<!--<?- chunksMap.css ?>-->";
 function getHeadTemplate(beforeEntryTemplate, context) {
   const callbacks = [
     (headTemplate2) => {

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

@@ -1,9 +1,16 @@
 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 = async (stream) => {
+  const forUserPipe = async () => {
     let renderToReadableStream;
     try {
       ({ renderToReadableStream } = require("react-dom/server"));
@@ -35,11 +42,20 @@ function renderToPipe(rootElement, context, options) {
               controller.close();
               return;
             }
-            if (isShellStream) {
-              controller.enqueue(encodeForWebStream(shellBefore));
-              controller.enqueue(value);
-              controller.enqueue(encodeForWebStream(shellAfter));
-              isShellStream = false;
+            if (shellChunkStatus !== 2 /* FINIESH */) {
+              let concatedChunk = new TextDecoder().decode(value);
+              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 */;
+              }
+              controller.enqueue(encodeForWebStream(concatedChunk));
             } else {
               controller.enqueue(value);
             }
@@ -48,7 +64,7 @@ function renderToPipe(rootElement, context, options) {
           push();
         }
       });
-      return readableOriginal(injectableStream).readableOriginal(stream);
+      return injectableStream;
     } catch (err) {
       ssrContext.metrics.emitCounter("app.render.streaming.shell.error", 1);
       const { shellAfter: shellAfter2, shellBefore: shellBefore2 } = getTemplates(
@@ -59,7 +75,7 @@ function renderToPipe(rootElement, context, options) {
       return fallbackHtml;
     }
   };
-  return forUserPipe;
+  return forUserPipe();
 }
 let encoder;
 function encodeForWebStream(thing) {

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

@@ -2,15 +2,14 @@ import { buildShellAfterTemplate } from "./buildTemplate.after";
 import { buildShellBeforeTemplate } from "./bulidTemplate.before";
 const HTML_SEPARATOR = "<!--<?- html ?>-->";
 const getTemplates = (context, renderLevel) => {
-  const { ssrContext, routerContext } = context;
+  const { ssrContext } = context;
   const [beforeAppTemplate = "", afterAppHtmlTemplate = ""] = ssrContext.template.split(HTML_SEPARATOR) || [];
   const builtBeforeTemplate = buildShellBeforeTemplate(
     beforeAppTemplate,
     context
   );
   const builtAfterTemplate = buildShellAfterTemplate(afterAppHtmlTemplate, {
-    ssrContext,
-    routerContext,
+    context,
     renderLevel
   });
   return {

package/dist/esm-node/ssr/serverRender/utils.js

@@ -1,3 +1,4 @@
+const CSS_CHUNKS_PLACEHOLDER = "<!--<?- chunksMap.css ?>-->";
 function getLoadableScripts(extractor) {
   const check = (scripts2) => (scripts2 || "").includes("__LOADABLE_REQUIRED_CHUNKS___ext");
   const scripts = extractor.getScriptTags();
@@ -7,5 +8,6 @@ function getLoadableScripts(extractor) {
   return scripts.split("</script>").slice(0, 2).map((i) => `${i}</script>`).join("");
 }
 export {
+  CSS_CHUNKS_PLACEHOLDER,
   getLoadableScripts
 };

package/dist/types/router/runtime/DeferredDataScripts.d.ts

@@ -1,8 +1,3 @@
-/// <reference types="react" />
+declare const _default: () => null;
 
-/**
- * DeferredDataScripts only renders in server side,
- * it doesn't need to be hydrated in client side.
- */
-declare const DeferredDataScripts: () => JSX.Element | null;
-export default DeferredDataScripts;
+export default _default;

package/dist/types/router/runtime/DeferredDataScripts.node.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+
+/**
+ * DeferredDataScripts only renders in server side,
+ * it doesn't need to be hydrated in client side.
+ */
+declare const DeferredDataScripts: () => JSX.Element | null;
+export default DeferredDataScripts;

package/dist/types/router/runtime/index.d.ts

@@ -4,6 +4,6 @@ export type { SingleRouteConfig, RouterConfig };
 export default routerPlugin;
 export { modifyRoutes } from './plugin';
 export * from './withRouter';
-export type { FormEncType, FormMethod, GetScrollRestorationKeyFunction, ParamKeyValuePair, SubmitOptions, URLSearchParamsInit, FetcherWithComponents, ActionFunction, ActionFunctionArgs, AwaitProps, unstable_Blocker, unstable_BlockerFunction, DataRouteMatch, DataRouteObject, Fetcher, Hash, IndexRouteObject, IndexRouteProps, JsonFunction, LayoutRouteProps, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, NavLinkProps, NonIndexRouteObject, OutletProps, Params, ParamParseKey, Path, PathMatch, Pathname, PathPattern, PathRouteProps, RedirectFunction, RelativeRoutingType, RouteMatch, RouteObject, RouteProps, RouterProps, RouterProviderProps, RoutesProps, Search, ShouldRevalidateFunction, To } from 'react-router-dom';
+export type { FormEncType, FormMethod, GetScrollRestorationKeyFunction, ParamKeyValuePair, SubmitOptions, URLSearchParamsInit, FetcherWithComponents, BrowserRouterProps, HashRouterProps, HistoryRouterProps, LinkProps, NavLinkProps, FormProps, ScrollRestorationProps, SubmitFunction, ActionFunction, ActionFunctionArgs, AwaitProps, unstable_Blocker, unstable_BlockerFunction, DataRouteMatch, DataRouteObject, Fetcher, Hash, IndexRouteObject, IndexRouteProps, JsonFunction, LayoutRouteProps, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, NonIndexRouteObject, OutletProps, Params, ParamParseKey, Path, PathMatch, Pathname, PathPattern, PathRouteProps, RedirectFunction, RelativeRoutingType, RouteMatch, RouteObject, RouteProps, RouterProps, RouterProviderProps, RoutesProps, Search, ShouldRevalidateFunction, To } from 'react-router-dom';
 export { 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';
 export { defer, json, redirect } from '@modern-js/utils/remix-router';

package/dist/types/ssr/serverRender/renderToStream/buildTemplate.after.d.ts

@@ -1,8 +1,6 @@
-import type { StaticHandlerContext } from '@modern-js/utils/remix-router';
-import { RenderLevel, SSRServerContext } from '../types';
+import { RenderLevel, RuntimeContext } from '../types';
 type BuildShellAfterTemplateOptions = {
-  ssrContext: SSRServerContext;
-  routerContext: StaticHandlerContext;
+  context: RuntimeContext;
   renderLevel: RenderLevel;
 };
 export declare function buildShellAfterTemplate(afterAppTemplate: string, options: BuildShellAfterTemplateOptions): string;

package/dist/types/ssr/serverRender/renderToStream/renderToPipe.worker.d.ts

@@ -4,5 +4,5 @@ import type { Writable } from 'stream';
 import type { RenderToReadableStreamOptions } from 'react-dom/server';
 import { RuntimeContext } from '../types';
 export type Pipe<T extends Writable> = (output: T) => Promise<T | string>;
-declare function renderToPipe(rootElement: React.ReactElement, context: RuntimeContext, options?: RenderToReadableStreamOptions): Pipe<Writable>;
+declare function renderToPipe(rootElement: React.ReactElement, context: RuntimeContext, options?: RenderToReadableStreamOptions): Promise<string | ReadableStream<any>>;
 export default renderToPipe;

package/dist/types/ssr/serverRender/utils.d.ts

@@ -1,2 +1,3 @@
 import type { ChunkExtractor } from '@loadable/server';
+export declare const CSS_CHUNKS_PLACEHOLDER = "<!--<?- chunksMap.css ?>-->";
 export declare function getLoadableScripts(extractor: ChunkExtractor): string;

package/package.json

@@ -11,7 +11,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.8.0",
+  "version": "2.10.0",
   "engines": {
     "node": ">=14.17.6"
   },
@@ -158,9 +158,9 @@
     "react-side-effect": "^2.1.1",
     "redux-logger": "^3.0.6",
     "styled-components": "^5.3.1",
-    "@modern-js/plugin": "2.8.0",
-    "@modern-js/types": "2.8.0",
-    "@modern-js/utils": "2.8.0"
+    "@modern-js/plugin": "2.10.0",
+    "@modern-js/types": "2.10.0",
+    "@modern-js/utils": "2.10.0"
   },
   "peerDependencies": {
     "react": ">=17",
@@ -172,20 +172,20 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/invariant": "^2.2.30",
-    "@types/jest": "^27",
+    "@types/jest": "^29",
     "@types/loadable__webpack-plugin": "^5.7.3",
     "@types/node": "^14",
     "@types/react-side-effect": "^1.1.1",
-    "jest": "^27",
+    "jest": "^29",
     "react": "^18",
     "react-dom": "^18",
-    "ts-jest": "^27.0.4",
+    "ts-jest": "^29.0.5",
     "typescript": "^4",
-    "@modern-js/app-tools": "2.8.0",
-    "@modern-js/core": "2.8.0",
-    "@modern-js/server-core": "2.8.0",
-    "@scripts/jest-config": "2.8.0",
-    "@scripts/build": "2.8.0"
+    "@modern-js/app-tools": "2.10.0",
+    "@modern-js/core": "2.10.0",
+    "@modern-js/server-core": "2.10.0",
+    "@scripts/build": "2.10.0",
+    "@scripts/jest-config": "2.10.0"
   },
   "sideEffects": false,
   "modernConfig": {},