@modern-js/runtime 2.42.2 → 2.44.0

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

@@ -11,13 +11,13 @@ var ShellChunkStatus;
   ShellChunkStatus2[ShellChunkStatus2["START"] = 0] = "START";
   ShellChunkStatus2[ShellChunkStatus2["FINIESH"] = 1] = "FINIESH";
 })(ShellChunkStatus || (ShellChunkStatus = {}));
-function renderToPipe(rootElement, context, options) {
+function renderToPipe(rootElement, context, pluginConfig, options) {
   var shellChunkStatus = 0;
   var chunkVec = [];
   var ssrContext = context.ssrContext;
   var forUserPipe = function() {
     var _ref = _async_to_generator(function() {
-      var renderToReadableStream, _getTemplates, shellAfter, shellBefore, readableOriginal, reader, injectableStream, err, _getTemplates1, shellAfter1, shellBefore1, fallbackHtml;
+      var renderToReadableStream, _ref2, shellAfter, shellBefore, readableOriginal, reader, injectableStream, err, _ref1, shellAfter1, shellBefore1, fallbackHtml;
       return _ts_generator(this, function(_state) {
         switch (_state.label) {
           case 0:
@@ -25,14 +25,19 @@ function renderToPipe(rootElement, context, options) {
               renderToReadableStream = require("react-dom/server").renderToReadableStream;
             } catch (e) {
             }
-            _getTemplates = getTemplates(context, RenderLevel.SERVER_RENDER), shellAfter = _getTemplates.shellAfter, shellBefore = _getTemplates.shellBefore;
-            _state.label = 1;
+            return [
+              4,
+              getTemplates(context, RenderLevel.SERVER_RENDER, pluginConfig)
+            ];
           case 1:
+            _ref2 = _state.sent(), shellAfter = _ref2.shellAfter, shellBefore = _ref2.shellBefore;
+            _state.label = 2;
+          case 2:
             _state.trys.push([
-              1,
-              3,
+              2,
+              4,
               ,
-              4
+              6
             ]);
             return [
               4,
@@ -44,7 +49,7 @@ function renderToPipe(rootElement, context, options) {
                 }
               }))
             ];
-          case 2:
+          case 3:
             readableOriginal = _state.sent();
             reader = readableOriginal.getReader();
             injectableStream = new ReadableStream({
@@ -54,7 +59,7 @@ function renderToPipe(rootElement, context, options) {
                 }
                 function _push() {
                   _push = _async_to_generator(function() {
-                    var _ref2, done, value, chunk, concatedChunk;
+                    var _ref3, done, value, chunk, concatedChunk;
                     return _ts_generator(this, function(_state2) {
                       switch (_state2.label) {
                         case 0:
@@ -63,7 +68,7 @@ function renderToPipe(rootElement, context, options) {
                             reader.read()
                           ];
                         case 1:
-                          _ref2 = _state2.sent(), done = _ref2.done, value = _ref2.value;
+                          _ref3 = _state2.sent(), done = _ref3.done, value = _ref3.value;
                           if (done) {
                             controller.close();
                             return [
@@ -98,16 +103,21 @@ function renderToPipe(rootElement, context, options) {
               2,
               injectableStream
             ];
-          case 3:
+          case 4:
             err = _state.sent();
             ssrContext === null || ssrContext === void 0 ? void 0 : ssrContext.tracker.trackError(SSRErrors.RENDER_SHELL, err);
-            _getTemplates1 = getTemplates(context, RenderLevel.CLIENT_RENDER), shellAfter1 = _getTemplates1.shellAfter, shellBefore1 = _getTemplates1.shellBefore;
+            return [
+              4,
+              getTemplates(context, RenderLevel.CLIENT_RENDER, pluginConfig)
+            ];
+          case 5:
+            _ref1 = _state.sent(), shellAfter1 = _ref1.shellAfter, shellBefore1 = _ref1.shellBefore;
             fallbackHtml = "".concat(shellBefore1).concat(shellAfter1);
             return [
               2,
               fallbackHtml
             ];
-          case 4:
+          case 6:
             return [
               2
             ];

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

@@ -1,20 +1,46 @@
+import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import { buildShellAfterTemplate } from "./buildTemplate.after";
 import { buildShellBeforeTemplate } from "./bulidTemplate.before";
 var HTML_SEPARATOR = "<!--<?- html ?>-->";
-var getTemplates = function(context, renderLevel) {
-  var ssrContext = context.ssrContext;
-  var _ref = _sliced_to_array(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, {
-    context,
-    renderLevel
+var getTemplates = function() {
+  var _ref = _async_to_generator(function(context, renderLevel, pluginConfig) {
+    var ssrContext, _ref2, tmp, beforeAppTemplate, tmp1, afterAppHtmlTemplate, builtBeforeTemplate, builtAfterTemplate;
+    return _ts_generator(this, function(_state) {
+      switch (_state.label) {
+        case 0:
+          ssrContext = context.ssrContext;
+          _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)
+          ];
+        case 1:
+          builtBeforeTemplate = _state.sent();
+          return [
+            4,
+            buildShellAfterTemplate(afterAppHtmlTemplate, {
+              context,
+              renderLevel
+            })
+          ];
+        case 2:
+          builtAfterTemplate = _state.sent();
+          return [
+            2,
+            {
+              shellBefore: builtBeforeTemplate,
+              shellAfter: builtAfterTemplate
+            }
+          ];
+      }
+    });
   });
-  return {
-    shellBefore: builtBeforeTemplate,
-    shellAfter: builtAfterTemplate
+  return function getTemplates2(context, renderLevel, pluginConfig) {
+    return _ref.apply(this, arguments);
   };
-};
+}();
 export {
   getTemplates
 };

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

@@ -1,35 +1,28 @@
-import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
-function unsafeReplace(source, searchValue, replaceValue) {
-  var _source_split = _sliced_to_array(source.split(searchValue), 2), s1 = _source_split[0], s2 = _source_split[1];
-  return s1 + replaceValue + s2;
-}
+import { safeReplace } from "../utils";
+import { HTML_PLACEHOLDER, SSR_DATA_PLACEHOLDER, CHUNK_JS_PLACEHOLDER, CHUNK_CSS_PLACEHOLDER } from "../constants";
 function buildHtml(template, callbacks) {
   return callbacks.reduce(function(tmp, cb) {
     return cb(tmp);
   }, template);
 }
 function createReplaceHtml(html) {
-  var HTML_REMARK = "<!--<?- html ?>-->";
   return function(template) {
-    return unsafeReplace(template, HTML_REMARK, html);
+    return safeReplace(template, HTML_PLACEHOLDER, html);
   };
 }
 function createReplaceSSRDataScript(data) {
-  var SSR_DATA_REMARK = "<!--<?- SSRDataScript ?>-->";
   return function(template) {
-    return unsafeReplace(template, SSR_DATA_REMARK, data);
+    return safeReplace(template, SSR_DATA_PLACEHOLDER, data);
   };
 }
 function createReplaceChunkJs(js) {
-  var CHUNK_JS_REMARK = "<!--<?- chunksMap.js ?>-->";
   return function(template) {
-    return unsafeReplace(template, CHUNK_JS_REMARK, js);
+    return safeReplace(template, CHUNK_JS_PLACEHOLDER, js);
   };
 }
 function createReplaceChunkCss(css) {
-  var CHUNK_CSS_REG = "<!--<?- chunksMap.css ?>-->";
   return function(template) {
-    return unsafeReplace(template, CHUNK_CSS_REG, css);
+    return safeReplace(template, CHUNK_CSS_PLACEHOLDER, css);
   };
 }
 export {

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

@@ -2,7 +2,7 @@ import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
 import { _ as _class_call_check } from "@swc/helpers/_/_class_call_check";
 import { _ as _create_class } from "@swc/helpers/_/_create_class";
 import { _ as _define_property } from "@swc/helpers/_/_define_property";
-import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import React from "react";
@@ -13,27 +13,34 @@ import { serializeErrors } from "../../../router/runtime/utils";
 import helmetReplace from "../helmet";
 import { RenderLevel } from "../types";
 import prefetch from "../../prefetch";
-import { ROUTER_DATA_JSON_ID, SSR_DATA_JSON_ID, attributesToString } from "../utils";
+import { ROUTER_DATA_JSON_ID, SSR_DATA_JSON_ID } from "../constants";
+import { attributesToString } from "../utils";
 import { SSRErrors, SSRTimings } from "../tracker";
 import { createLoadableCollector } from "./loadable";
 import { createRender } from "./render";
 import { createStyledCollector } from "./styledComponent";
 import { buildHtml, createReplaceChunkCss, createReplaceChunkJs, createReplaceHtml, createReplaceSSRDataScript } from "./buildHtml";
-var buildTemplateData = function(context, data, renderLevel, tracker) {
-  var request = context.request, enableUnsafeCtx = context.enableUnsafeCtx;
-  var unsafeContext = {
-    headers: request.headers
-  };
+var buildTemplateData = function(context, data, renderLevel, tracker, config) {
+  var request = context.request;
+  var unsafeHeaders = config.unsafeHeaders;
+  var headers = unsafeHeaders ? Object.fromEntries(Object.entries(request.headers).filter(function(param) {
+    var _param = _sliced_to_array(param, 2), key = _param[0], _ = _param[1];
+    var _unsafeHeaders_map;
+    return unsafeHeaders === null || unsafeHeaders === void 0 ? void 0 : (_unsafeHeaders_map = unsafeHeaders.map(function(header) {
+      return header.toLowerCase();
+    })) === null || _unsafeHeaders_map === void 0 ? void 0 : _unsafeHeaders_map.includes(key.toLowerCase());
+  })) : void 0;
   return {
     data,
     context: {
-      request: _object_spread({
+      request: {
         params: request.params,
         query: request.query,
         pathname: request.pathname,
         host: request.host,
-        url: request.url
-      }, enableUnsafeCtx ? unsafeContext : {}),
+        url: request.url,
+        headers
+      },
       reporter: {
         sessionId: tracker.sessionId
       }
@@ -41,8 +48,7 @@ var buildTemplateData = function(context, data, renderLevel, tracker) {
     renderLevel
   };
 };
-var Entry;
-Entry = /* @__PURE__ */ function() {
+var Entry = /* @__PURE__ */ function() {
   "use strict";
   function Entry2(options) {
     _class_call_check(this, Entry2);
@@ -130,7 +136,7 @@ Entry = /* @__PURE__ */ function() {
                   loaderData: routerContext.loaderData,
                   errors: serializeErrors(routerContext.errors)
                 } : void 0;
-                templateData = buildTemplateData(ssrContext, prefetchData, _this.result.renderLevel, _this.tracker);
+                templateData = buildTemplateData(ssrContext, prefetchData, _this.result.renderLevel, _this.tracker, _this.pluginConfig);
                 ssrDataScripts = _this.getSSRDataScript(templateData, routerData);
                 html = buildHtml(_this.template, [
                   createReplaceChunkCss(_this.result.chunksMap.css),

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

@@ -1,13 +1,12 @@
 import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import { run } from "@modern-js/runtime-utils/node";
-import { PreRender } from "../../react/prerender";
 import SSREntry from "./entry";
 var render = function(param) {
   var App = param.App, context = param.context, config = param.config;
   var ssrContext = context.ssrContext;
   return run(ssrContext.request.headers, /* @__PURE__ */ _async_to_generator(function() {
-    var entry, html, cacheConfig;
+    var entry, html;
     return _ts_generator(this, function(_state) {
       switch (_state.label) {
         case 0:
@@ -23,10 +22,6 @@ var render = function(param) {
           ];
         case 1:
           html = _state.sent();
-          cacheConfig = PreRender.config();
-          if (cacheConfig) {
-            context.ssrContext.cacheConfig = cacheConfig;
-          }
           return [
             2,
             html

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

@@ -6,7 +6,7 @@ import { _ as _instanceof } from "@swc/helpers/_/_instanceof";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import { ChunkExtractor } from "@loadable/server";
-import { attributesToString } from "../utils";
+import { attributesToString, checkIsNode } from "../utils";
 var extname = function(uri) {
   if (typeof uri !== "string" || !uri.includes(".")) {
     return "";
@@ -61,10 +61,6 @@ var readAsset = function() {
     return _ref.apply(this, arguments);
   };
 }();
-var checkIsNode = function() {
-  var _process_release;
-  return typeof process !== "undefined" && ((_process_release = process.release) === null || _process_release === void 0 ? void 0 : _process_release.name) === "node";
-};
 var LoadableCollector = /* @__PURE__ */ function() {
   "use strict";
   function LoadableCollector2(options) {
@@ -184,7 +180,7 @@ var LoadableCollector = /* @__PURE__ */ function() {
                       var script;
                       return _ts_generator(this, function(_state2) {
                         script = "<script".concat(attributes, ' src="').concat(chunk.url, '"></script>');
-                        if (checkIsInline(chunk, enableInlineScripts) && checkIsNode()) {
+                        if (checkIsNode() && checkIsInline(chunk, enableInlineScripts)) {
                           return [
                             2,
                             readAsset(chunk).then(function(content) {
@@ -244,7 +240,7 @@ var LoadableCollector = /* @__PURE__ */ function() {
                       var link;
                       return _ts_generator(this, function(_state2) {
                         link = "<link".concat(atrributes, ' href="').concat(chunk.url, '" rel="stylesheet" />');
-                        if (checkIsInline(chunk, enableInlineStyles) && checkIsNode()) {
+                        if (checkIsNode() && checkIsInline(chunk, enableInlineStyles)) {
                           return [
                             2,
                             readAsset(chunk).then(function(content) {

package/dist/esm/ssr/serverRender/types.js

@@ -1,4 +1,9 @@
-import { RenderLevel } from "./renderToString/type";
+var RenderLevel;
+(function(RenderLevel2) {
+  RenderLevel2[RenderLevel2["CLIENT_RENDER"] = 0] = "CLIENT_RENDER";
+  RenderLevel2[RenderLevel2["SERVER_PREFETCH"] = 1] = "SERVER_PREFETCH";
+  RenderLevel2[RenderLevel2["SERVER_RENDER"] = 2] = "SERVER_RENDER";
+})(RenderLevel || (RenderLevel = {}));
 export {
   RenderLevel
 };

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

@@ -1,16 +1,21 @@
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
-var CSS_CHUNKS_PLACEHOLDER = "<!--<?- chunksMap.css ?>-->";
-var SSR_DATA_JSON_ID = "__MODERN_SSR_DATA__";
-var ROUTER_DATA_JSON_ID = "__MODERN_ROUTER_DATA__";
 function attributesToString(attributes) {
   return Object.entries(attributes).reduce(function(str, param) {
     var _param = _sliced_to_array(param, 2), key = _param[0], value = _param[1];
     return value === void 0 ? str : "".concat(str, " ").concat(key, '="').concat(value, '"');
   }, "");
 }
+function safeReplace(source, searchValue, replaceValue) {
+  return source.replace(searchValue, function() {
+    return replaceValue;
+  });
+}
+function checkIsNode() {
+  var _process_release;
+  return typeof process !== "undefined" && ((_process_release = process.release) === null || _process_release === void 0 ? void 0 : _process_release.name) === "node";
+}
 export {
-  CSS_CHUNKS_PLACEHOLDER,
-  ROUTER_DATA_JSON_ID,
-  SSR_DATA_JSON_ID,
-  attributesToString
+  attributesToString,
+  checkIsNode,
+  safeReplace
 };

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

@@ -1,4 +1,3 @@
-import path from "path";
 import { isReact18, cleanRequireCache } from "@modern-js/utils";
 import { statePlugin } from "../state/cli";
 import { ssrPlugin } from "../ssr/cli";
@@ -23,8 +22,8 @@ const runtimePlugin = () => ({
   setup: (api) => {
     return {
       config() {
-        const dir = api.useAppContext().internalDirectory || "";
-        process.env.IS_REACT18 = isReact18(path.join(dir, "../../")).toString();
+        const appDir = api.useAppContext().appDirectory;
+        process.env.IS_REACT18 = isReact18(appDir).toString();
         return {
           runtime: {},
           runtimeByEntries: {},

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

@@ -70,11 +70,11 @@ const ssrPlugin = () => ({
             }
           },
           tools: {
-            bundlerChain(chain, { isServer, isServiceWorker, CHAIN_ID }) {
+            bundlerChain(chain, { isServer, isServiceWorker }) {
               const userConfig = api.useResolvedConfigContext();
               if (isUseSSRBundle(userConfig) && !isServer && !isServiceWorker && checkUseStringSSR(userConfig)) {
                 const LoadableBundlerPlugin = require("./loadable-bundler-plugin.js");
-                chain.plugin(CHAIN_ID.PLUGIN.LOADABLE).use(LoadableBundlerPlugin, [
+                chain.plugin("loadable").use(LoadableBundlerPlugin, [
                   {
                     filename: LOADABLE_STATS_FILE
                   }
@@ -120,12 +120,13 @@ const ssrPlugin = () => ({
       },
       modifyEntryRuntimePlugins({ entrypoint, plugins, bundlerConfigs }) {
         if (ssrConfigMap.get(entrypoint.entryName)) {
-          var _bundlerConfigs_find_output, _bundlerConfigs_find, _config_server;
+          var _bundlerConfigs_find_output, _bundlerConfigs_find, _config_server, _config_server1;
           const chunkLoadingGlobal = bundlerConfigs === null || bundlerConfigs === void 0 ? void 0 : (_bundlerConfigs_find = bundlerConfigs.find((config2) => config2.name === "client")) === null || _bundlerConfigs_find === void 0 ? void 0 : (_bundlerConfigs_find_output = _bundlerConfigs_find.output) === null || _bundlerConfigs_find_output === void 0 ? void 0 : _bundlerConfigs_find_output.chunkLoadingGlobal;
           const config = api.useResolvedConfigContext();
           const { enableInlineScripts, enableInlineStyles } = config.output;
           const { crossorigin, scriptLoading } = config.html;
           const disablePrerender = typeof ((_config_server = config.server) === null || _config_server === void 0 ? void 0 : _config_server.ssr) === "object" ? Boolean(config.server.ssr.disablePrerender) : false;
+          const unsafeHeaders = typeof ((_config_server1 = config.server) === null || _config_server1 === void 0 ? void 0 : _config_server1.ssr) === "object" ? config.server.ssr.unsafeHeaders : void 0;
           plugins.push({
             name: PLUGIN_IDENTIFIER,
             options: JSON.stringify({
@@ -135,7 +136,8 @@ const ssrPlugin = () => ({
               chunkLoadingGlobal,
               disablePrerender,
               enableInlineScripts: typeof enableInlineScripts === "function" ? void 0 : enableInlineScripts,
-              enableInlineStyles: typeof enableInlineStyles === "function" ? void 0 : enableInlineStyles
+              enableInlineStyles: typeof enableInlineStyles === "function" ? void 0 : enableInlineStyles,
+              unsafeHeaders
             })
           });
         }

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

@@ -5,7 +5,7 @@ import { parsedJSONFromElement } from "@modern-js/runtime-utils/parsed";
 import { RenderLevel } from "./serverRender/types";
 import { WithCallback } from "./react/withCallback";
 import { formatClient, mockResponse, isReact18 } from "./utils";
-import { ROUTER_DATA_JSON_ID, SSR_DATA_JSON_ID } from "./serverRender/utils";
+import { ROUTER_DATA_JSON_ID, SSR_DATA_JSON_ID } from "./serverRender/constants";
 const ssr = (config) => ({
   name: "@modern-js/plugin-ssr",
   setup: () => {
@@ -24,6 +24,14 @@ const ssr = (config) => ({
           },
           _hydration: true
         };
+        const { ssrContext } = hydrateContext;
+        const { pathname: initialPathname } = ssrContext.request;
+        const currentPathname = window.location.pathname;
+        if (initialPathname !== currentPathname) {
+          const errorMsg = `The initial URL ${initialPathname} and the URL ${currentPathname} to be hydrated do not match, reload.`;
+          console.error(errorMsg);
+          window.location.reload();
+        }
         const callback = () => {
           delete hydrateContext._hydration;
         };

package/dist/esm-node/ssr/react/prerender/index.js

@@ -68,6 +68,7 @@ function factory(Component) {
       if (!validate) {
         throw new Error("invalid props, check usage");
       }
+      console.error("[Warn] PreRender has been deprecated, please use SSR Cache instead. reference to docs: https://modernjs.dev/guides/advanced-features/ssr.html");
       return createElement(Component, {
         ...newProps
       });

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

@@ -0,0 +1,14 @@
+const HTML_PLACEHOLDER = "<!--<?- html ?>-->";
+const SSR_DATA_PLACEHOLDER = "<!--<?- SSRDataScript ?>-->";
+const CHUNK_JS_PLACEHOLDER = "<!--<?- chunksMap.js ?>-->";
+const CHUNK_CSS_PLACEHOLDER = "<!--<?- chunksMap.css ?>-->";
+const SSR_DATA_JSON_ID = "__MODERN_SSR_DATA__";
+const ROUTER_DATA_JSON_ID = "__MODERN_ROUTER_DATA__";
+export {
+  CHUNK_CSS_PLACEHOLDER,
+  CHUNK_JS_PLACEHOLDER,
+  HTML_PLACEHOLDER,
+  ROUTER_DATA_JSON_ID,
+  SSR_DATA_JSON_ID,
+  SSR_DATA_PLACEHOLDER
+};

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

@@ -1,4 +1,5 @@
 import { EOL } from "os";
+import { safeReplace } from "./utils";
 const RE_HTML_ATTR = /<html[^>]*>/;
 const RE_BODY_ATTR = /<body[^>]*>/;
 const RE_LAST_IN_HEAD = /<\/head>/;
@@ -8,11 +9,11 @@ function helmet(content, helmetData) {
   let result = content;
   const bodyAttributes = helmetData.bodyAttributes.toString();
   if (bodyAttributes) {
-    result = result.replace(RE_BODY_ATTR, `<body ${bodyAttributes}>`);
+    result = safeReplace(result, RE_BODY_ATTR, `<body ${bodyAttributes}>`);
   }
   const htmlAttributes = helmetData.htmlAttributes.toString();
   if (htmlAttributes) {
-    result = result.replace(RE_HTML_ATTR, `<html ${htmlAttributes}>`);
+    result = safeReplace(result, RE_HTML_ATTR, `<html ${htmlAttributes}>`);
   }
   const base = helmetData.base.toString();
   const link = helmetData.link.toString();
@@ -24,7 +25,7 @@ function helmet(content, helmetData) {
   const existTitleTag = RE_TITLE.test(content);
   const shouldReplaceTitle = existTitleTag && TEST_TITLE_CONTENT.test(title.trim());
   if (shouldReplaceTitle) {
-    result = result.replace(RE_TITLE, title);
+    result = safeReplace(result, RE_TITLE, title);
   }
   const helmetStr = [
     base,
@@ -37,7 +38,7 @@ function helmet(content, helmetData) {
   ].reduce((pre, cur) => {
     return pre + (cur.length > 0 ? `  ${cur}${EOL}` : "");
   }, "");
-  return result.replace(RE_LAST_IN_HEAD, `${helmetStr}</head>`);
+  return safeReplace(result, RE_LAST_IN_HEAD, `${helmetStr}</head>`);
 }
 export {
   helmet as default

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

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

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

@@ -1,5 +1,6 @@
 import { serializeJson } from "@modern-js/runtime-utils/node";
-import { attributesToString } from "../utils";
+import { attributesToString, safeReplace } from "../utils";
+import { SSR_DATA_PLACEHOLDER } from "../constants";
 import { buildTemplate } from "./buildTemplate.share";
 function buildShellAfterTemplate(afterAppTemplate, options) {
   const callbacks = [
@@ -8,7 +9,7 @@ function buildShellAfterTemplate(afterAppTemplate, options) {
   return buildTemplate(afterAppTemplate, callbacks);
   function injectSSRDataScript(template) {
     const ssrDataScript = buildSSRDataScript();
-    return template.replace("<!--<?- SSRDataScript ?>-->", ssrDataScript);
+    return safeReplace(template, SSR_DATA_PLACEHOLDER, ssrDataScript);
     function buildSSRDataScript() {
       const { context: { ssrContext, initialData, __i18nData__ }, renderLevel } = options;
       const { request, enableUnsafeCtx, nonce, tracker } = ssrContext;

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

@@ -1,6 +1,6 @@
 const HEAD_REG_EXP = /<head(.|\n)*>(.|\n)*<\/head>/;
 function buildTemplate(template, callbacks) {
-  return callbacks.reduce((template2, buildTemplateCb) => buildTemplateCb(template2), template);
+  return callbacks.reduce((promise, buildTemplateCb) => promise.then((template2) => buildTemplateCb(template2)), Promise.resolve(template));
 }
 export {
   HEAD_REG_EXP,

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

@@ -1,9 +1,27 @@
 import ReactHelmet from "react-helmet";
 import { matchRoutes } from "@modern-js/runtime-utils/router";
 import helmetReplace from "../helmet";
-import { CSS_CHUNKS_PLACEHOLDER } from "../utils";
+import { CHUNK_CSS_PLACEHOLDER } from "../constants";
+import { checkIsNode, safeReplace } from "../utils";
 import { HEAD_REG_EXP, buildTemplate } from "./buildTemplate.share";
-function getHeadTemplate(beforeEntryTemplate, context) {
+const readAsset = async (chunk) => {
+  const fs = await import("fs/promises");
+  const path = await import("path");
+  const filepath = path.join(__dirname, chunk);
+  return fs.readFile(filepath, "utf-8");
+};
+const checkIsInline = (chunk, enableInline) => {
+  if (process.env.NODE_ENV === "production") {
+    if (enableInline instanceof RegExp) {
+      return enableInline.test(chunk);
+    } else {
+      return Boolean(enableInline);
+    }
+  } else {
+    return false;
+  }
+};
+function getHeadTemplate(beforeEntryTemplate, context, pluginConfig) {
   const callbacks = [
     (headTemplate2) => {
       const helmetData = ReactHelmet.renderStatic();
@@ -17,9 +35,10 @@ function getHeadTemplate(beforeEntryTemplate, context) {
     return "";
   }
   return buildTemplate(headTemplate, callbacks);
-  function injectCss(headTemplate2) {
-    return headTemplate2.replace(CSS_CHUNKS_PLACEHOLDER, getCssChunks());
-    function getCssChunks() {
+  async function injectCss(headTemplate2) {
+    const css = await getCssChunks();
+    return safeReplace(headTemplate2, CHUNK_CSS_PLACEHOLDER, css);
+    async function getCssChunks() {
       const { routeManifest, routerContext, routes } = context;
       if (!routeManifest || !routerContext || !routes) {
         return "";
@@ -41,15 +60,23 @@ function getHeadTemplate(beforeEntryTemplate, context) {
           }
         }
       });
-      const styleLinks = cssChunks.map((chunk) => {
-        return `<link href="${chunk}" rel="stylesheet" />`;
-      });
-      return `${styleLinks.join("")}`;
+      const { enableInlineStyles } = pluginConfig;
+      const styles = await Promise.all(cssChunks.map(async (chunk) => {
+        const link = `<link href="${chunk}" rel="stylesheet" />`;
+        if (checkIsNode() && checkIsInline(chunk, enableInlineStyles)) {
+          return readAsset(chunk).then((content) => `<style>${content}</style>`).catch((_) => {
+            return link;
+          });
+        } else {
+          return link;
+        }
+      }));
+      return `${styles.join("")}`;
     }
   }
 }
-function buildShellBeforeTemplate(beforeAppTemplate, context) {
-  const headTemplate = getHeadTemplate(beforeAppTemplate, context);
+async function buildShellBeforeTemplate(beforeAppTemplate, context, pluginConfig) {
+  const headTemplate = await getHeadTemplate(beforeAppTemplate, context, pluginConfig);
   return beforeAppTemplate.replace(HEAD_REG_EXP, headTemplate);
 }
 export {