@modern-js/runtime 2.50.0 → 2.52.0

package/dist/cjs/core/compatible.js

@@ -57,13 +57,12 @@ const createApp = ({ plugins, props: globalProps }) => {
   return (App) => {
     const runner = appRuntime.init();
     const WrapperComponent = (props) => {
-      var _props_children;
       const element = /* @__PURE__ */ import_react.default.createElement(App || import_react.default.Fragment, App ? {
         ...props
-      } : null, App ? props.children : /* @__PURE__ */ import_react.default.cloneElement(props.children, {
-        ...(_props_children = props.children) === null || _props_children === void 0 ? void 0 : _props_children.props,
+      } : null, App ? props.children : import_react.default.Children.map(props.children, (child) => /* @__PURE__ */ import_react.default.isValidElement(child) ? /* @__PURE__ */ import_react.default.cloneElement(child, {
+        ...child.props,
         ...props
-      }));
+      }) : child));
       const context = (0, import_react.useContext)(import_runtimeContext.RuntimeReactContext);
       return runner.provide({
         element,
@@ -241,7 +240,12 @@ const bootstrap = async (BootApp, id, root, ReactDOM) => {
     };
     const initialData = await runInit(context);
     if (!isRedirectResponse(initialData)) {
+      var _context_routerContext, _context_routerContext1;
       context.initialData = initialData;
+      if (((_context_routerContext = context.routerContext) === null || _context_routerContext === void 0 ? void 0 : _context_routerContext.statusCode) && ((_context_routerContext1 = context.routerContext) === null || _context_routerContext1 === void 0 ? void 0 : _context_routerContext1.statusCode) !== 200) {
+        var _context_routerContext2, _context_ssrContext;
+        (_context_ssrContext = context.ssrContext) === null || _context_ssrContext === void 0 ? void 0 : _context_ssrContext.response.status((_context_routerContext2 = context.routerContext) === null || _context_routerContext2 === void 0 ? void 0 : _context_routerContext2.statusCode);
+      }
       return runner.server({
         App,
         context

package/dist/cjs/router/runtime/DeferredDataScripts.node.js

@@ -25,14 +25,12 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_router = require("@modern-js/runtime-utils/router");
 var import_node = require("@modern-js/runtime-utils/node");
-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.resolve(e)};`;
 const DeferredDataScripts = (props) => {
-  const context = (0, import_react.useContext)(import_router.UNSAFE_DataRouterContext);
-  const { staticContext } = context || {};
+  const staticContext = props === null || props === void 0 ? void 0 : props.context;
   const hydratedRef = (0, import_react.useRef)(false);
   (0, import_react.useEffect)(() => {
     hydratedRef.current = true;
@@ -101,8 +99,7 @@ const DeferredDataScripts = (props) => {
           __html: deferredScripts[0]
         }
       }),
-      !hydratedRef.current && deferredScripts[1],
-      import_common.JSX_SHELL_STREAM_END_MARK
+      !hydratedRef.current && deferredScripts[1]
     ]
   });
 };

package/dist/cjs/router/runtime/plugin.node.js

@@ -42,9 +42,11 @@ var import_router2 = require("@modern-js/runtime-utils/router");
 var import_node = require("@modern-js/runtime-utils/node");
 var import_time = require("@modern-js/runtime-utils/time");
 var import_constants = require("@modern-js/utils/universal/constants");
+var import_common = require("../../common");
 var import_core = require("../../core");
 var import_utils = require("./utils");
 var import_hooks = require("./hooks");
+var import_DeferredDataScripts = __toESM(require("./DeferredDataScripts.node"));
 function createFetchRequest(req) {
   const origin = `${req.protocol}://${req.host}`;
   const url = new URL(req.originalUrl || req.url, origin);
@@ -133,14 +135,22 @@ const routerPlugin = ({ basename = "", originalBaseUrl = "", routesConfig, creat
           }
           const getRouteApp = () => {
             return (props) => {
-              const { remixRouter, routerContext } = (0, import_react.useContext)(import_core.RuntimeReactContext);
-              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(App, {
+              const { remixRouter, routerContext, ssrContext } = (0, import_react.useContext)(import_core.RuntimeReactContext);
+              const { nonce, mode } = ssrContext;
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(App, {
                 ...props,
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_router.StaticRouterProvider, {
-                  router: remixRouter,
-                  context: routerContext,
-                  hydrate: false
-                })
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_router.StaticRouterProvider, {
+                    router: remixRouter,
+                    context: routerContext,
+                    hydrate: false
+                  }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DeferredDataScripts.default, {
+                    nonce,
+                    context: routerContext
+                  }),
+                  mode === "stream" && import_common.JSX_SHELL_STREAM_END_MARK
+                ]
               });
             };
           };

package/dist/cjs/ssr/serverRender/renderToStream/bulidTemplate.before.js

@@ -54,18 +54,21 @@ const checkIsInline = (chunk, enableInline) => {
     return false;
   }
 };
-async function buildShellBeforeTemplate(beforeAppTemplate, context, pluginConfig) {
+async function buildShellBeforeTemplate(beforeAppTemplate, context, pluginConfig, styledComponentsStyleTags) {
   const helmetData = import_react_helmet.default.renderStatic();
   const callbacks = [
     (headTemplate) => {
       return helmetData ? (0, import_helmet.default)(headTemplate, helmetData) : headTemplate;
     },
     // @TODO: prefetch scripts of lazy component
-    injectCss
+    (template) => injectCss(template, styledComponentsStyleTags)
   ];
   return (0, import_buildTemplate.buildTemplate)(beforeAppTemplate, callbacks);
-  async function injectCss(template) {
-    const css = await getCssChunks();
+  async function injectCss(template, styledComponentsStyleTags2) {
+    let css = await getCssChunks();
+    if (styledComponentsStyleTags2) {
+      css += styledComponentsStyleTags2;
+    }
     return (0, import_utils.safeReplace)(template, import_constants.CHUNK_CSS_PLACEHOLDER, css);
     async function getCssChunks() {
       const { routeManifest, routerContext, routes } = context;

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

@@ -22,6 +22,7 @@ __export(renderToPipe_exports, {
 });
 module.exports = __toCommonJS(renderToPipe_exports);
 var import_stream = require("stream");
+var import_styled_components = require("styled-components");
 var import_types = require("../types");
 var import_common = require("../../../common");
 var import_template = require("./template");
@@ -33,7 +34,9 @@ var ShellChunkStatus;
 function renderToPipe(rootElement, context, pluginConfig, options) {
   var _context_ssrContext;
   let shellChunkStatus = 0;
-  const onReady = ((_context_ssrContext = context.ssrContext) === null || _context_ssrContext === void 0 ? void 0 : _context_ssrContext.isSpider) ? "onAllReady" : "onShellReady";
+  const forceStream2String = Boolean(process.env.MODERN_JS_STREAM_TO_STRING);
+  const onReady = ((_context_ssrContext = context.ssrContext) === null || _context_ssrContext === void 0 ? void 0 : _context_ssrContext.isSpider) || forceStream2String ? "onAllReady" : "onShellReady";
+  const sheet = new import_styled_components.ServerStyleSheet();
   const { ssrContext } = context;
   const chunkVec = [];
   const forUserPipe = new Promise((resolve) => {
@@ -42,20 +45,23 @@ function renderToPipe(rootElement, context, pluginConfig, options) {
       ({ renderToPipeableStream } = require("react-dom/server"));
     } catch (e) {
     }
-    const { pipe } = renderToPipeableStream(rootElement, {
+    const root = forceStream2String ? sheet.collectStyles(rootElement) : rootElement;
+    let renderLevel = import_types.RenderLevel.SERVER_RENDER;
+    const { pipe } = renderToPipeableStream(root, {
       ...options,
       nonce: ssrContext === null || ssrContext === void 0 ? void 0 : ssrContext.nonce,
       [onReady]() {
-        (0, import_template.getTemplates)(context, import_types.RenderLevel.SERVER_RENDER, pluginConfig).then(({ shellAfter, shellBefore }) => {
-          var _options_onShellReady;
-          options === null || options === void 0 ? void 0 : (_options_onShellReady = options.onShellReady) === null || _options_onShellReady === void 0 ? void 0 : _options_onShellReady.call(options);
+        const styledComponentsStyleTags = forceStream2String ? sheet.getStyleTags() : "";
+        (0, import_template.getTemplates)(context, renderLevel, pluginConfig, styledComponentsStyleTags).then(({ shellAfter, shellBefore }) => {
+          var _options_onReady;
+          options === null || options === void 0 ? void 0 : (_options_onReady = options[onReady]) === null || _options_onReady === void 0 ? void 0 : _options_onReady.call(options);
           const injectableTransform = new import_stream.Transform({
             transform(chunk, _encoding, callback) {
               try {
                 if (shellChunkStatus !== 1) {
                   chunkVec.push(chunk.toString());
                   let concatedChunk = chunkVec.join("");
-                  if (concatedChunk.endsWith(import_common.ESCAPED_SHELL_STREAM_END_MARK)) {
+                  if (concatedChunk.includes(import_common.ESCAPED_SHELL_STREAM_END_MARK)) {
                     concatedChunk = concatedChunk.replace(import_common.ESCAPED_SHELL_STREAM_END_MARK, "");
                     shellChunkStatus = 1;
                     this.push(`${shellBefore}${concatedChunk}${shellAfter}`);
@@ -78,12 +84,18 @@ function renderToPipe(rootElement, context, pluginConfig, options) {
         });
       },
       onShellError(error) {
-        (0, import_template.getTemplates)(context, import_types.RenderLevel.CLIENT_RENDER, pluginConfig).then(({ shellAfter, shellBefore }) => {
+        renderLevel = import_types.RenderLevel.CLIENT_RENDER;
+        (0, import_template.getTemplates)(context, renderLevel, pluginConfig).then(({ shellAfter, shellBefore }) => {
           var _options_onShellError;
           const fallbackHtml = `${shellBefore}${shellAfter}`;
           resolve(fallbackHtml);
           options === null || options === void 0 ? void 0 : (_options_onShellError = options.onShellError) === null || _options_onShellError === void 0 ? void 0 : _options_onShellError.call(options, error);
         });
+      },
+      onError(error) {
+        var _options_onError;
+        renderLevel = import_types.RenderLevel.CLIENT_RENDER;
+        options === null || options === void 0 ? void 0 : (_options_onError = options.onError) === null || _options_onError === void 0 ? void 0 : _options_onError.call(options, error);
       }
     });
   });

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

@@ -24,10 +24,10 @@ module.exports = __toCommonJS(template_exports);
 var import_buildTemplate = require("./buildTemplate.after");
 var import_bulidTemplate = require("./bulidTemplate.before");
 const HTML_SEPARATOR = "<!--<?- html ?>-->";
-const getTemplates = async (context, renderLevel, pluginConfig) => {
+const getTemplates = async (context, renderLevel, pluginConfig, styledComponentsStyleTags) => {
   const { ssrContext } = context;
   const [beforeAppTemplate = "", afterAppHtmlTemplate = ""] = ssrContext.template.split(HTML_SEPARATOR) || [];
-  const builtBeforeTemplate = await (0, import_bulidTemplate.buildShellBeforeTemplate)(beforeAppTemplate, context, pluginConfig);
+  const builtBeforeTemplate = await (0, import_bulidTemplate.buildShellBeforeTemplate)(beforeAppTemplate, context, pluginConfig, styledComponentsStyleTags);
   const builtAfterTemplate = await (0, import_buildTemplate.buildShellAfterTemplate)(afterAppHtmlTemplate, {
     context,
     renderLevel

package/dist/esm/core/compatible.js

@@ -32,8 +32,9 @@ var createApp = function(param) {
   return function(App) {
     var runner = appRuntime.init();
     var WrapperComponent = function(props) {
-      var _props_children;
-      var element = /* @__PURE__ */ React.createElement(App || React.Fragment, App ? _object_spread({}, props) : null, App ? props.children : /* @__PURE__ */ React.cloneElement(props.children, _object_spread({}, (_props_children = props.children) === null || _props_children === void 0 ? void 0 : _props_children.props, props)));
+      var element = /* @__PURE__ */ React.createElement(App || React.Fragment, App ? _object_spread({}, props) : null, App ? props.children : React.Children.map(props.children, function(child) {
+        return /* @__PURE__ */ React.isValidElement(child) ? /* @__PURE__ */ React.cloneElement(child, _object_spread({}, child.props, props)) : child;
+      }));
       var context = useContext(RuntimeReactContext);
       return runner.provide({
         element,
@@ -86,7 +87,7 @@ var createApp = function(param) {
 };
 var bootstrap = function() {
   var _ref = _async_to_generator(function(BootApp, id, root, ReactDOM) {
-    var App, runner, context, runInit, isBrowser, _ssrData_data, _ssrData_data1, ssrData, loadersData, initialLoadersState, initialData, rootElement, ModernRender, ModernHydrate, isRedirectResponse, initialData1;
+    var App, runner, context, runInit, isBrowser, _ssrData_data, _ssrData_data1, ssrData, loadersData, initialLoadersState, initialData, rootElement, ModernRender, ModernHydrate, isRedirectResponse, initialData1, _context_routerContext, _context_routerContext1, _context_routerContext2, _context_ssrContext;
     return _ts_generator(this, function(_state) {
       switch (_state.label) {
         case 0:
@@ -247,7 +248,12 @@ var bootstrap = function() {
         case 5:
           initialData1 = _state.sent();
           if (!isRedirectResponse(initialData1)) {
+            ;
             context.initialData = initialData1;
+            if (((_context_routerContext = context.routerContext) === null || _context_routerContext === void 0 ? void 0 : _context_routerContext.statusCode) && ((_context_routerContext1 = context.routerContext) === null || _context_routerContext1 === void 0 ? void 0 : _context_routerContext1.statusCode) !== 200) {
+              ;
+              (_context_ssrContext = context.ssrContext) === null || _context_ssrContext === void 0 ? void 0 : _context_ssrContext.response.status((_context_routerContext2 = context.routerContext) === null || _context_routerContext2 === void 0 ? void 0 : _context_routerContext2.statusCode);
+            }
             return [
               2,
               runner.server({

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

@@ -1,16 +1,14 @@
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Suspense, useEffect, useRef, useMemo, useContext } from "react";
-import { Await, UNSAFE_DataRouterContext as DataRouterContext, useAsyncError } from "@modern-js/runtime-utils/router";
+import { Suspense, useEffect, useRef, useMemo } from "react";
+import { Await, useAsyncError } from "@modern-js/runtime-utils/router";
 import { serializeJson } from "@modern-js/runtime-utils/node";
-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.resolve(e)};";
 var DeferredDataScripts = function(props) {
-  var context = useContext(DataRouterContext);
-  var staticContext = (context || {}).staticContext;
+  var staticContext = props === null || props === void 0 ? void 0 : props.context;
   var hydratedRef = useRef(false);
   useEffect(function() {
     hydratedRef.current = true;
@@ -80,8 +78,7 @@ var DeferredDataScripts = function(props) {
           __html: deferredScripts[0]
         }
       }),
-      !hydratedRef.current && deferredScripts[1],
-      JSX_SHELL_STREAM_END_MARK
+      !hydratedRef.current && deferredScripts[1]
     ]
   });
 };

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

@@ -4,7 +4,7 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import { createStaticHandler } from "@modern-js/runtime-utils/remix-router";
 import { createStaticRouter, StaticRouterProvider } from "@modern-js/runtime-utils/node/router";
@@ -13,9 +13,11 @@ import { createRoutesFromElements } from "@modern-js/runtime-utils/router";
 import { reporterCtx, createRequestContext } from "@modern-js/runtime-utils/node";
 import { time } from "@modern-js/runtime-utils/time";
 import { LOADER_REPORTER_NAME } from "@modern-js/utils/universal/constants";
+import { JSX_SHELL_STREAM_END_MARK } from "../../common";
 import { RuntimeReactContext } from "../../core";
 import { renderRoutes, urlJoin } from "./utils";
 import { modifyRoutes as modifyRoutesHook } from "./hooks";
+import DeferredDataScripts from "./DeferredDataScripts.node";
 function createFetchRequest(req) {
   var origin = "".concat(req.protocol, "://").concat(req.host);
   var url = new URL(req.originalUrl || req.url, origin);
@@ -162,13 +164,21 @@ var routerPlugin = function(param) {
           }
           var getRouteApp = function() {
             return function(props) {
-              var _useContext = useContext(RuntimeReactContext), remixRouter = _useContext.remixRouter, routerContext = _useContext.routerContext;
-              return /* @__PURE__ */ _jsx(App, _object_spread_props(_object_spread({}, props), {
-                children: /* @__PURE__ */ _jsx(StaticRouterProvider, {
-                  router: remixRouter,
-                  context: routerContext,
-                  hydrate: false
-                })
+              var _useContext = useContext(RuntimeReactContext), remixRouter = _useContext.remixRouter, routerContext = _useContext.routerContext, ssrContext = _useContext.ssrContext;
+              var nonce = ssrContext.nonce, mode = ssrContext.mode;
+              return /* @__PURE__ */ _jsxs(App, _object_spread_props(_object_spread({}, props), {
+                children: [
+                  /* @__PURE__ */ _jsx(StaticRouterProvider, {
+                    router: remixRouter,
+                    context: routerContext,
+                    hydrate: false
+                  }),
+                  /* @__PURE__ */ _jsx(DeferredDataScripts, {
+                    nonce,
+                    context: routerContext
+                  }),
+                  mode === "stream" && JSX_SHELL_STREAM_END_MARK
+                ]
               }));
             };
           };

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

@@ -49,17 +49,17 @@ var checkIsInline = function(chunk, enableInline) {
     return false;
   }
 };
-function buildShellBeforeTemplate(beforeAppTemplate, context, pluginConfig) {
+function buildShellBeforeTemplate(beforeAppTemplate, context, pluginConfig, styledComponentsStyleTags) {
   return _buildShellBeforeTemplate.apply(this, arguments);
 }
 function _buildShellBeforeTemplate() {
-  _buildShellBeforeTemplate = _async_to_generator(function(beforeAppTemplate, context, pluginConfig) {
+  _buildShellBeforeTemplate = _async_to_generator(function(beforeAppTemplate, context, pluginConfig, styledComponentsStyleTags) {
     var helmetData, callbacks;
-    function injectCss(template) {
+    function injectCss(template, styledComponentsStyleTags2) {
       return _injectCss.apply(this, arguments);
     }
     function _injectCss() {
-      _injectCss = _async_to_generator(function(template) {
+      _injectCss = _async_to_generator(function(template, styledComponentsStyleTags2) {
         var css;
         function getCssChunks() {
           return _getCssChunks.apply(this, arguments);
@@ -150,6 +150,9 @@ function _buildShellBeforeTemplate() {
               ];
             case 1:
               css = _state.sent();
+              if (styledComponentsStyleTags2) {
+                css += styledComponentsStyleTags2;
+              }
               return [
                 2,
                 safeReplace(template, CHUNK_CSS_PLACEHOLDER, css)
@@ -166,7 +169,9 @@ function _buildShellBeforeTemplate() {
           return helmetData ? helmetReplace(headTemplate, helmetData) : headTemplate;
         },
         // @TODO: prefetch scripts of lazy component
-        injectCss
+        function(template) {
+          return injectCss(template, styledComponentsStyleTags);
+        }
       ];
       return [
         2,

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

@@ -3,6 +3,7 @@ import { _ as _instanceof } from "@swc/helpers/_/_instanceof";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { Transform } from "stream";
+import { ServerStyleSheet } from "styled-components";
 import { RenderLevel } from "../types";
 import { ESCAPED_SHELL_STREAM_END_MARK } from "../../../common";
 import { getTemplates } from "./template";
@@ -14,7 +15,9 @@ var ShellChunkStatus;
 function renderToPipe(rootElement, context, pluginConfig, options) {
   var _context_ssrContext;
   var shellChunkStatus = 0;
-  var onReady = ((_context_ssrContext = context.ssrContext) === null || _context_ssrContext === void 0 ? void 0 : _context_ssrContext.isSpider) ? "onAllReady" : "onShellReady";
+  var forceStream2String = Boolean(process.env.MODERN_JS_STREAM_TO_STRING);
+  var onReady = ((_context_ssrContext = context.ssrContext) === null || _context_ssrContext === void 0 ? void 0 : _context_ssrContext.isSpider) || forceStream2String ? "onAllReady" : "onShellReady";
+  var sheet = new ServerStyleSheet();
   var ssrContext = context.ssrContext;
   var chunkVec = [];
   var forUserPipe = new Promise(function(resolve) {
@@ -23,21 +26,24 @@ function renderToPipe(rootElement, context, pluginConfig, options) {
       renderToPipeableStream = require("react-dom/server").renderToPipeableStream;
     } catch (e) {
     }
+    var root = forceStream2String ? sheet.collectStyles(rootElement) : rootElement;
+    var renderLevel = RenderLevel.SERVER_RENDER;
     var _obj;
-    var pipe = renderToPipeableStream(rootElement, _object_spread_props(_object_spread({}, options), (_obj = {
+    var pipe = renderToPipeableStream(root, _object_spread_props(_object_spread({}, options), (_obj = {
       nonce: ssrContext === null || ssrContext === void 0 ? void 0 : ssrContext.nonce
     }, _define_property(_obj, onReady, function() {
-      getTemplates(context, RenderLevel.SERVER_RENDER, pluginConfig).then(function(param) {
+      var styledComponentsStyleTags = forceStream2String ? sheet.getStyleTags() : "";
+      getTemplates(context, renderLevel, pluginConfig, styledComponentsStyleTags).then(function(param) {
         var shellAfter = param.shellAfter, shellBefore = param.shellBefore;
-        var _options_onShellReady;
-        options === null || options === void 0 ? void 0 : (_options_onShellReady = options.onShellReady) === null || _options_onShellReady === void 0 ? void 0 : _options_onShellReady.call(options);
+        var _options_onReady;
+        options === null || options === void 0 ? void 0 : (_options_onReady = options[onReady]) === null || _options_onReady === void 0 ? void 0 : _options_onReady.call(options);
         var injectableTransform = new Transform({
           transform: function transform(chunk, _encoding, callback) {
             try {
               if (shellChunkStatus !== 1) {
                 chunkVec.push(chunk.toString());
                 var concatedChunk = chunkVec.join("");
-                if (concatedChunk.endsWith(ESCAPED_SHELL_STREAM_END_MARK)) {
+                if (concatedChunk.includes(ESCAPED_SHELL_STREAM_END_MARK)) {
                   concatedChunk = concatedChunk.replace(ESCAPED_SHELL_STREAM_END_MARK, "");
                   shellChunkStatus = 1;
                   this.push("".concat(shellBefore).concat(concatedChunk).concat(shellAfter));
@@ -59,13 +65,18 @@ function renderToPipe(rootElement, context, pluginConfig, options) {
         resolve(injectableTransform);
       });
     }), _define_property(_obj, "onShellError", function onShellError(error) {
-      getTemplates(context, RenderLevel.CLIENT_RENDER, pluginConfig).then(function(param) {
+      renderLevel = RenderLevel.CLIENT_RENDER;
+      getTemplates(context, renderLevel, pluginConfig).then(function(param) {
         var shellAfter = param.shellAfter, shellBefore = param.shellBefore;
         var _options_onShellError;
         var fallbackHtml = "".concat(shellBefore).concat(shellAfter);
         resolve(fallbackHtml);
         options === null || options === void 0 ? void 0 : (_options_onShellError = options.onShellError) === null || _options_onShellError === void 0 ? void 0 : _options_onShellError.call(options, error);
       });
+    }), _define_property(_obj, "onError", function onError(error) {
+      var _options_onError;
+      renderLevel = RenderLevel.CLIENT_RENDER;
+      options === null || options === void 0 ? void 0 : (_options_onError = options.onError) === null || _options_onError === void 0 ? void 0 : _options_onError.call(options, error);
     }), _obj))).pipe;
   });
   return forUserPipe;

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

@@ -5,7 +5,7 @@ import { buildShellAfterTemplate } from "./buildTemplate.after";
 import { buildShellBeforeTemplate } from "./bulidTemplate.before";
 var HTML_SEPARATOR = "<!--<?- html ?>-->";
 var getTemplates = function() {
-  var _ref = _async_to_generator(function(context, renderLevel, pluginConfig) {
+  var _ref = _async_to_generator(function(context, renderLevel, pluginConfig, styledComponentsStyleTags) {
     var ssrContext, _ref2, tmp, beforeAppTemplate, tmp1, afterAppHtmlTemplate, builtBeforeTemplate, builtAfterTemplate;
     return _ts_generator(this, function(_state) {
       switch (_state.label) {
@@ -14,7 +14,7 @@ var getTemplates = function() {
           _ref2 = _sliced_to_array(ssrContext.template.split(HTML_SEPARATOR) || [], 2), tmp = _ref2[0], beforeAppTemplate = tmp === void 0 ? "" : tmp, tmp1 = _ref2[1], afterAppHtmlTemplate = tmp1 === void 0 ? "" : tmp1;
           return [
             4,
-            buildShellBeforeTemplate(beforeAppTemplate, context, pluginConfig)
+            buildShellBeforeTemplate(beforeAppTemplate, context, pluginConfig, styledComponentsStyleTags)
           ];
         case 1:
           builtBeforeTemplate = _state.sent();
@@ -37,7 +37,7 @@ var getTemplates = function() {
       }
     });
   });
-  return function getTemplates2(context, renderLevel, pluginConfig) {
+  return function getTemplates2(context, renderLevel, pluginConfig, styledComponentsStyleTags) {
     return _ref.apply(this, arguments);
   };
 }();

package/dist/esm-node/core/compatible.js

@@ -22,13 +22,12 @@ const createApp = ({ plugins, props: globalProps }) => {
   return (App) => {
     const runner = appRuntime.init();
     const WrapperComponent = (props) => {
-      var _props_children;
       const element = /* @__PURE__ */ React.createElement(App || React.Fragment, App ? {
         ...props
-      } : null, App ? props.children : /* @__PURE__ */ React.cloneElement(props.children, {
-        ...(_props_children = props.children) === null || _props_children === void 0 ? void 0 : _props_children.props,
+      } : null, App ? props.children : React.Children.map(props.children, (child) => /* @__PURE__ */ React.isValidElement(child) ? /* @__PURE__ */ React.cloneElement(child, {
+        ...child.props,
         ...props
-      }));
+      }) : child));
       const context = useContext(RuntimeReactContext);
       return runner.provide({
         element,
@@ -206,7 +205,12 @@ const bootstrap = async (BootApp, id, root, ReactDOM) => {
     };
     const initialData = await runInit(context);
     if (!isRedirectResponse(initialData)) {
+      var _context_routerContext, _context_routerContext1;
       context.initialData = initialData;
+      if (((_context_routerContext = context.routerContext) === null || _context_routerContext === void 0 ? void 0 : _context_routerContext.statusCode) && ((_context_routerContext1 = context.routerContext) === null || _context_routerContext1 === void 0 ? void 0 : _context_routerContext1.statusCode) !== 200) {
+        var _context_routerContext2, _context_ssrContext;
+        (_context_ssrContext = context.ssrContext) === null || _context_ssrContext === void 0 ? void 0 : _context_ssrContext.response.status((_context_routerContext2 = context.routerContext) === null || _context_routerContext2 === void 0 ? void 0 : _context_routerContext2.statusCode);
+      }
       return runner.server({
         App,
         context

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

@@ -1,15 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Suspense, useEffect, useRef, useMemo, useContext } from "react";
-import { Await, UNSAFE_DataRouterContext as DataRouterContext, useAsyncError } from "@modern-js/runtime-utils/router";
+import { Suspense, useEffect, useRef, useMemo } from "react";
+import { Await, useAsyncError } from "@modern-js/runtime-utils/router";
 import { serializeJson } from "@modern-js/runtime-utils/node";
-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 = (props) => {
-  const context = useContext(DataRouterContext);
-  const { staticContext } = context || {};
+  const staticContext = props === null || props === void 0 ? void 0 : props.context;
   const hydratedRef = useRef(false);
   useEffect(() => {
     hydratedRef.current = true;
@@ -78,8 +76,7 @@ const DeferredDataScripts = (props) => {
           __html: deferredScripts[0]
         }
       }),
-      !hydratedRef.current && deferredScripts[1],
-      JSX_SHELL_STREAM_END_MARK
+      !hydratedRef.current && deferredScripts[1]
     ]
   });
 };

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import { createStaticHandler } from "@modern-js/runtime-utils/remix-router";
 import { createStaticRouter, StaticRouterProvider } from "@modern-js/runtime-utils/node/router";
@@ -7,9 +7,11 @@ import { createRoutesFromElements } from "@modern-js/runtime-utils/router";
 import { reporterCtx, createRequestContext } from "@modern-js/runtime-utils/node";
 import { time } from "@modern-js/runtime-utils/time";
 import { LOADER_REPORTER_NAME } from "@modern-js/utils/universal/constants";
+import { JSX_SHELL_STREAM_END_MARK } from "../../common";
 import { RuntimeReactContext } from "../../core";
 import { renderRoutes, urlJoin } from "./utils";
 import { modifyRoutes as modifyRoutesHook } from "./hooks";
+import DeferredDataScripts from "./DeferredDataScripts.node";
 function createFetchRequest(req) {
   const origin = `${req.protocol}://${req.host}`;
   const url = new URL(req.originalUrl || req.url, origin);
@@ -98,14 +100,22 @@ const routerPlugin = ({ basename = "", originalBaseUrl = "", routesConfig, creat
           }
           const getRouteApp = () => {
             return (props) => {
-              const { remixRouter, routerContext } = useContext(RuntimeReactContext);
-              return /* @__PURE__ */ _jsx(App, {
+              const { remixRouter, routerContext, ssrContext } = useContext(RuntimeReactContext);
+              const { nonce, mode } = ssrContext;
+              return /* @__PURE__ */ _jsxs(App, {
                 ...props,
-                children: /* @__PURE__ */ _jsx(StaticRouterProvider, {
-                  router: remixRouter,
-                  context: routerContext,
-                  hydrate: false
-                })
+                children: [
+                  /* @__PURE__ */ _jsx(StaticRouterProvider, {
+                    router: remixRouter,
+                    context: routerContext,
+                    hydrate: false
+                  }),
+                  /* @__PURE__ */ _jsx(DeferredDataScripts, {
+                    nonce,
+                    context: routerContext
+                  }),
+                  mode === "stream" && JSX_SHELL_STREAM_END_MARK
+                ]
               });
             };
           };

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

@@ -21,18 +21,21 @@ const checkIsInline = (chunk, enableInline) => {
     return false;
   }
 };
-async function buildShellBeforeTemplate(beforeAppTemplate, context, pluginConfig) {
+async function buildShellBeforeTemplate(beforeAppTemplate, context, pluginConfig, styledComponentsStyleTags) {
   const helmetData = ReactHelmet.renderStatic();
   const callbacks = [
     (headTemplate) => {
       return helmetData ? helmetReplace(headTemplate, helmetData) : headTemplate;
     },
     // @TODO: prefetch scripts of lazy component
-    injectCss
+    (template) => injectCss(template, styledComponentsStyleTags)
   ];
   return buildTemplate(beforeAppTemplate, callbacks);
-  async function injectCss(template) {
-    const css = await getCssChunks();
+  async function injectCss(template, styledComponentsStyleTags2) {
+    let css = await getCssChunks();
+    if (styledComponentsStyleTags2) {
+      css += styledComponentsStyleTags2;
+    }
     return safeReplace(template, CHUNK_CSS_PLACEHOLDER, css);
     async function getCssChunks() {
       const { routeManifest, routerContext, routes } = context;

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

@@ -1,4 +1,5 @@
 import { Transform } from "stream";
+import { ServerStyleSheet } from "styled-components";
 import { RenderLevel } from "../types";
 import { ESCAPED_SHELL_STREAM_END_MARK } from "../../../common";
 import { getTemplates } from "./template";
@@ -10,7 +11,9 @@ var ShellChunkStatus;
 function renderToPipe(rootElement, context, pluginConfig, options) {
   var _context_ssrContext;
   let shellChunkStatus = 0;
-  const onReady = ((_context_ssrContext = context.ssrContext) === null || _context_ssrContext === void 0 ? void 0 : _context_ssrContext.isSpider) ? "onAllReady" : "onShellReady";
+  const forceStream2String = Boolean(process.env.MODERN_JS_STREAM_TO_STRING);
+  const onReady = ((_context_ssrContext = context.ssrContext) === null || _context_ssrContext === void 0 ? void 0 : _context_ssrContext.isSpider) || forceStream2String ? "onAllReady" : "onShellReady";
+  const sheet = new ServerStyleSheet();
   const { ssrContext } = context;
   const chunkVec = [];
   const forUserPipe = new Promise((resolve) => {
@@ -19,20 +22,23 @@ function renderToPipe(rootElement, context, pluginConfig, options) {
       ({ renderToPipeableStream } = require("react-dom/server"));
     } catch (e) {
     }
-    const { pipe } = renderToPipeableStream(rootElement, {
+    const root = forceStream2String ? sheet.collectStyles(rootElement) : rootElement;
+    let renderLevel = RenderLevel.SERVER_RENDER;
+    const { pipe } = renderToPipeableStream(root, {
       ...options,
       nonce: ssrContext === null || ssrContext === void 0 ? void 0 : ssrContext.nonce,
       [onReady]() {
-        getTemplates(context, RenderLevel.SERVER_RENDER, pluginConfig).then(({ shellAfter, shellBefore }) => {
-          var _options_onShellReady;
-          options === null || options === void 0 ? void 0 : (_options_onShellReady = options.onShellReady) === null || _options_onShellReady === void 0 ? void 0 : _options_onShellReady.call(options);
+        const styledComponentsStyleTags = forceStream2String ? sheet.getStyleTags() : "";
+        getTemplates(context, renderLevel, pluginConfig, styledComponentsStyleTags).then(({ shellAfter, shellBefore }) => {
+          var _options_onReady;
+          options === null || options === void 0 ? void 0 : (_options_onReady = options[onReady]) === null || _options_onReady === void 0 ? void 0 : _options_onReady.call(options);
           const injectableTransform = new Transform({
             transform(chunk, _encoding, callback) {
               try {
                 if (shellChunkStatus !== 1) {
                   chunkVec.push(chunk.toString());
                   let concatedChunk = chunkVec.join("");
-                  if (concatedChunk.endsWith(ESCAPED_SHELL_STREAM_END_MARK)) {
+                  if (concatedChunk.includes(ESCAPED_SHELL_STREAM_END_MARK)) {
                     concatedChunk = concatedChunk.replace(ESCAPED_SHELL_STREAM_END_MARK, "");
                     shellChunkStatus = 1;
                     this.push(`${shellBefore}${concatedChunk}${shellAfter}`);
@@ -55,12 +61,18 @@ function renderToPipe(rootElement, context, pluginConfig, options) {
         });
       },
       onShellError(error) {
-        getTemplates(context, RenderLevel.CLIENT_RENDER, pluginConfig).then(({ shellAfter, shellBefore }) => {
+        renderLevel = RenderLevel.CLIENT_RENDER;
+        getTemplates(context, renderLevel, pluginConfig).then(({ shellAfter, shellBefore }) => {
           var _options_onShellError;
           const fallbackHtml = `${shellBefore}${shellAfter}`;
           resolve(fallbackHtml);
           options === null || options === void 0 ? void 0 : (_options_onShellError = options.onShellError) === null || _options_onShellError === void 0 ? void 0 : _options_onShellError.call(options, error);
         });
+      },
+      onError(error) {
+        var _options_onError;
+        renderLevel = RenderLevel.CLIENT_RENDER;
+        options === null || options === void 0 ? void 0 : (_options_onError = options.onError) === null || _options_onError === void 0 ? void 0 : _options_onError.call(options, error);
       }
     });
   });

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

@@ -1,10 +1,10 @@
 import { buildShellAfterTemplate } from "./buildTemplate.after";
 import { buildShellBeforeTemplate } from "./bulidTemplate.before";
 const HTML_SEPARATOR = "<!--<?- html ?>-->";
-const getTemplates = async (context, renderLevel, pluginConfig) => {
+const getTemplates = async (context, renderLevel, pluginConfig, styledComponentsStyleTags) => {
   const { ssrContext } = context;
   const [beforeAppTemplate = "", afterAppHtmlTemplate = ""] = ssrContext.template.split(HTML_SEPARATOR) || [];
-  const builtBeforeTemplate = await buildShellBeforeTemplate(beforeAppTemplate, context, pluginConfig);
+  const builtBeforeTemplate = await buildShellBeforeTemplate(beforeAppTemplate, context, pluginConfig, styledComponentsStyleTags);
   const builtAfterTemplate = await buildShellAfterTemplate(afterAppHtmlTemplate, {
     context,
     renderLevel

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

@@ -1,9 +1,11 @@
 /// <reference types="react" />
+import { StaticHandlerContext } from '@modern-js/runtime-utils/remix-router';
 /**
  * DeferredDataScripts only renders in server side,
  * it doesn't need to be hydrated in client side.
  */
 declare const DeferredDataScripts: (props?: {
     nonce?: string;
+    context: StaticHandlerContext;
 }) => JSX.Element | null;
 export default DeferredDataScripts;

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

@@ -56,7 +56,7 @@ interface DataFunctionArgs<D = any> {
     params: Params;
     context?: D;
 }
-export type LoaderFunctionArgs<P extends Record<string, unknown> = any> = DataFunctionArgs<RequestContext<P>>;
+export type LoaderFunctionArgs<P extends Record<string, unknown> = Record<string, unknown>> = DataFunctionArgs<RequestContext<P>>;
 declare type DataFunctionValue = Response | NonNullable<unknown> | null;
 export type LoaderFunction = <P extends Record<string, unknown> = Record<string, unknown>>(args: LoaderFunctionArgs<P>) => Promise<DataFunctionValue> | DataFunctionValue;
 export {};

package/dist/types/ssr/serverRender/renderToStream/bulidTemplate.before.d.ts

@@ -1,2 +1,2 @@
 import { RuntimeContext, SSRPluginConfig } from '../types';
-export declare function buildShellBeforeTemplate(beforeAppTemplate: string, context: RuntimeContext, pluginConfig: SSRPluginConfig): Promise<string>;
+export declare function buildShellBeforeTemplate(beforeAppTemplate: string, context: RuntimeContext, pluginConfig: SSRPluginConfig, styledComponentsStyleTags?: string): Promise<string>;

package/dist/types/ssr/serverRender/renderToStream/template.d.ts

@@ -3,4 +3,4 @@ export type InjectTemplate = {
     shellBefore: string;
     shellAfter: string;
 };
-export declare const getTemplates: (context: RuntimeContext, renderLevel: RenderLevel, pluginConfig: SSRPluginConfig) => Promise<InjectTemplate>;
+export declare const getTemplates: (context: RuntimeContext, renderLevel: RenderLevel, pluginConfig: SSRPluginConfig, styledComponentsStyleTags?: string) => Promise<InjectTemplate>;

package/package.json

@@ -15,7 +15,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.50.0",
+  "version": "2.52.0",
   "engines": {
     "node": ">=14.17.6"
   },
@@ -170,10 +170,10 @@
     "react-side-effect": "^2.1.1",
     "styled-components": "^5.3.1",
     "@swc/helpers": "0.5.3",
-    "@modern-js/plugin": "2.50.0",
-    "@modern-js/types": "2.50.0",
-    "@modern-js/utils": "2.50.0",
-    "@modern-js/runtime-utils": "2.50.0"
+    "@modern-js/plugin": "2.52.0",
+    "@modern-js/types": "2.52.0",
+    "@modern-js/runtime-utils": "2.52.0",
+    "@modern-js/utils": "2.52.0"
   },
   "peerDependencies": {
     "react": ">=17",
@@ -194,11 +194,11 @@
     "ts-jest": "^29.1.0",
     "typescript": "^5",
     "webpack": "^5.91.0",
-    "@modern-js/app-tools": "2.50.0",
-    "@modern-js/server-core": "2.50.0",
-    "@modern-js/core": "2.50.0",
-    "@scripts/build": "2.50.0",
-    "@scripts/jest-config": "2.50.0"
+    "@scripts/build": "2.52.0",
+    "@modern-js/core": "2.52.0",
+    "@modern-js/app-tools": "2.52.0",
+    "@modern-js/server-core": "2.52.0",
+    "@scripts/jest-config": "2.52.0"
   },
   "sideEffects": false,
   "publishConfig": {