@modern-js/runtime 2.50.0 → 2.51.0

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,13 +45,16 @@ 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 {
@@ -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/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,14 +26,17 @@ 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 {
@@ -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/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,13 +22,16 @@ 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 {
@@ -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/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.51.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/types": "2.51.0",
+    "@modern-js/plugin": "2.51.0",
+    "@modern-js/utils": "2.51.0",
+    "@modern-js/runtime-utils": "2.51.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"
+    "@modern-js/app-tools": "2.51.0",
+    "@modern-js/core": "2.51.0",
+    "@scripts/build": "2.51.0",
+    "@modern-js/server-core": "2.51.0",
+    "@scripts/jest-config": "2.51.0"
   },
   "sideEffects": false,
   "publishConfig": {