@modern-js/runtime 2.6.0 → 2.8.0

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

@@ -59,13 +59,16 @@ function _objectSpreadProps(target, source) {
 }
 import { Transform } from "stream";
 import { RenderLevel } from "../types";
+import { ESCAPED_SHELL_STREAM_END_MARK } from "../../../common";
 import { getTemplates } from "./template";
+var ShellChunkStatus = /* @__PURE__ */ function(ShellChunkStatus2) {
+    ShellChunkStatus2[ShellChunkStatus2["IDLE"] = 0] = "IDLE";
+    ShellChunkStatus2[ShellChunkStatus2["START"] = 1] = "START";
+    ShellChunkStatus2[ShellChunkStatus2["FINIESH"] = 2] = "FINIESH";
+    return ShellChunkStatus2;
+}(ShellChunkStatus || {});
 function renderToPipe(rootElement, context, options) {
-    var joinChunk = function joinChunk() {
-        var before = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "", chunk = arguments.length > 1 ? arguments[1] : void 0, after = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "";
-        return "".concat(before).concat(chunk.toString()).concat(after);
-    };
-    var isShellStream = true;
+    var shellChunkStatus = 0 /* IDLE */ ;
     var ssrContext = context.ssrContext;
     var forUserPipe = function(stream) {
         return new Promise(function(resolve) {
@@ -81,9 +84,17 @@ function renderToPipe(rootElement, context, options) {
                     var injectableTransform = new Transform({
                         transform: function transform(chunk, _encoding, callback) {
                             try {
-                                if (isShellStream) {
-                                    this.push(joinChunk(shellBefore, chunk, shellAfter));
-                                    isShellStream = false;
+                                if (shellChunkStatus !== 2 /* FINIESH */ ) {
+                                    var concatedChunk = chunk.toString();
+                                    if (shellChunkStatus === 0 /* IDLE */ ) {
+                                        concatedChunk = "".concat(shellBefore).concat(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);
                                 }

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

@@ -48,11 +48,12 @@ import { buildShellAfterTemplate } from "./buildTemplate.after";
 import { buildShellBeforeTemplate } from "./bulidTemplate.before";
 var HTML_SEPARATOR = "<!--<?- html ?>-->";
 var getTemplates = function(context, renderLevel) {
-    var ssrContext = context.ssrContext;
+    var ssrContext = context.ssrContext, routerContext = context.routerContext;
     var _ref = _slicedToArray(ssrContext.template.split(HTML_SEPARATOR) || [], 2), tmp = _ref[0], beforeAppTemplate = tmp === void 0 ? "" : tmp, tmp1 = _ref[1], afterAppHtmlTemplate = tmp1 === void 0 ? "" : tmp1;
     var builtBeforeTemplate = buildShellBeforeTemplate(beforeAppTemplate, context);
     var builtAfterTemplate = buildShellAfterTemplate(afterAppHtmlTemplate, {
         ssrContext: ssrContext,
+        routerContext: routerContext,
         renderLevel: renderLevel
     });
     return {

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

@@ -171,8 +171,9 @@ var __generator = this && this.__generator || function(thisArg, body) {
 };
 import React from "react";
 import ReactDomServer from "react-dom/server";
-import serialize from "serialize-javascript";
+import { serializeJson } from "@modern-js/utils/serialize";
 import ReactHelmet from "react-helmet";
+import { serializeErrors } from "../../../router/runtime/utils";
 import helmetReplace from "../helmet";
 import { RenderLevel } from "../types";
 import { time } from "../time";
@@ -236,7 +237,7 @@ var Entry = /*#__PURE__*/ function() {
             value: function renderToHtml(context) {
                 var _this = this;
                 return _asyncToGenerator(function() {
-                    var _ssrContext_redirection, _ssrContext_redirection1, _ssrContext_redirection2, ssrContext, prefetchData, html, templateData, SSRData, _iteratorNormalCompletion, _didIteratorError, _iteratorError, _iterator, _step, fragment, helmetData;
+                    var _ssrContext_redirection, _ssrContext_redirection1, _ssrContext_redirection2, ssrContext, prefetchData, routerContext, routerData, html, templateData, SSRData, _iteratorNormalCompletion, _didIteratorError, _iteratorError, _iterator, _step, fragment, helmetData;
                     return __generator(this, function(_state) {
                         switch(_state.label){
                             case 0:
@@ -268,9 +269,14 @@ var Entry = /*#__PURE__*/ function() {
                                         ""
                                     ];
                                 }
+                                routerContext = context.routerContext;
+                                routerData = routerContext ? {
+                                    loaderData: routerContext.loaderData,
+                                    errors: serializeErrors(routerContext.errors)
+                                } : void 0;
                                 html = "";
                                 templateData = buildTemplateData(ssrContext, prefetchData, _this.result.renderLevel);
-                                SSRData = _this.getSSRDataScript(templateData);
+                                SSRData = _this.getSSRDataScript(templateData, routerData);
                                 _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
                                 try {
                                     for(_iterator = _this.fragments[Symbol.iterator](); !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
@@ -395,11 +401,13 @@ var Entry = /*#__PURE__*/ function() {
         },
         {
             key: "getSSRDataScript",
-            value: function getSSRDataScript(templateData) {
+            value: function getSSRDataScript(templateData, routerData) {
+                var ssrDataScripts = "<script>window._SSR_DATA = ".concat(serializeJson(templateData), "</script>");
+                if (routerData) {
+                    ssrDataScripts += "\n<script>window._ROUTER_DATA = ".concat(serializeJson(routerData), "</script>");
+                }
                 return {
-                    SSRDataScript: "\n        <script>window._SSR_DATA = ".concat(serialize(templateData, {
-                        isJSON: true
-                    }), "</script>\n      ")
+                    SSRDataScript: ssrDataScripts
                 };
             }
         }

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

@@ -1,5 +1,4 @@
 export * from "@modern-js-reduck/react";
-import { model, createStore } from "@modern-js-reduck/store";
 import { default as default2 } from "./plugin";
 export * from "./plugin";
-export { createStore, default2 as default, model };
+export { default2 as default };

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

@@ -7,13 +7,14 @@ import Document from "../document/cli";
 var cli_default = () => ({
   name: "@modern-js/runtime",
   post: [
-    "@modern-js/plugin-router",
     "@modern-js/plugin-ssr",
-    "@modern-js/plugin-document",
     "@modern-js/plugin-state",
+    "@modern-js/plugin-router",
+    "@modern-js/plugin-document",
     "@modern-js/plugin-design-token"
   ],
-  usePlugins: [PluginState(), PluginSSR(), PluginRouter(), Document()],
+  // the order of runtime plugins is affected by runtime hooks, mainly `init` and `hoc` hooks
+  usePlugins: [PluginSSR(), PluginState(), PluginRouter(), Document()],
   setup: (api) => {
     return {
       config() {

package/dist/esm-node/common.js

@@ -1,4 +1,8 @@
 const isBrowser = () => typeof window !== "undefined" && window.name !== "nodejs";
+const JSX_SHELL_STREAM_END_MARK = "<!--<?- SHELL_STREAM_END ?>-->";
+const 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-node/core/compatible.js

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

package/dist/esm-node/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 {

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

@@ -7,7 +7,7 @@ import {
   useEffect
 } from "react";
 import invariant from "invariant";
-import { RuntimeReactContext } from "../../runtime-context";
+import { RuntimeReactContext } from "../../runtimeContext";
 import { LoaderStatus } from "./loaderManager";
 const useLoader = (loaderFn, options = { params: void 0 }) => {
   const context = useContext(RuntimeReactContext);

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();