@modern-js/runtime 2.37.2 → 2.38.0

package/dist/cjs/ssr/cli/index.js

@@ -157,6 +157,7 @@ const ssrPlugin = () => ({
           var _bundlerConfigs_find_output, _bundlerConfigs_find, _config_server;
           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;
           plugins.push({
@@ -166,7 +167,9 @@ const ssrPlugin = () => ({
               crossorigin,
               scriptLoading,
               chunkLoadingGlobal,
-              disablePrerender
+              disablePrerender,
+              enableInlineScripts: typeof enableInlineScripts === "function" ? void 0 : enableInlineScripts,
+              enableInlineStyles: typeof enableInlineStyles === "function" ? void 0 : enableInlineStyles
             })
           });
         }

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

@@ -81,7 +81,7 @@ class Entry {
       return "";
     }
     if (this.result.renderLevel >= import_types.RenderLevel.SERVER_PREFETCH) {
-      this.result.html = this.renderToString(context);
+      this.result.html = await this.renderToString(context);
     }
     if ((_ssrContext_redirection2 = ssrContext.redirection) === null || _ssrContext_redirection2 === void 0 ? void 0 : _ssrContext_redirection2.url) {
       return "";
@@ -117,7 +117,7 @@ class Entry {
     }
     return prefetchData || {};
   }
-  renderToString(context) {
+  async renderToString(context) {
     let html = "";
     const end = (0, import_time.time)();
     const { ssrContext } = context;
@@ -127,13 +127,14 @@ class Entry {
           ssr: true
         })
       });
-      html = (0, import_render.createRender)(App).addCollector((0, import_styledComponent.createStyledCollector)(this.result)).addCollector((0, import_loadable.createLoadableCollector)({
+      html = await (0, import_render.createRender)(App).addCollector((0, import_styledComponent.createStyledCollector)(this.result)).addCollector((0, import_loadable.createLoadableCollector)({
         stats: ssrContext.loadableStats,
         result: this.result,
         entryName: this.entryName,
         config: this.pluginConfig,
         nonce: this.nonce,
-        template: this.template
+        template: this.template,
+        routeManifest: this.routeManifest
       })).finish();
       const cost = end();
       this.tracker.trackTiming(import_tracker.SSRTimings.SSR_RENDER_HTML, cost);
@@ -168,12 +169,14 @@ class Entry {
     (0, import_define_property._)(this, "pluginConfig", void 0);
     (0, import_define_property._)(this, "htmlModifiers", void 0);
     (0, import_define_property._)(this, "nonce", void 0);
+    (0, import_define_property._)(this, "routeManifest", void 0);
     const { ctx, config } = options;
     const { entryName, template, nonce } = ctx;
     this.template = template;
     this.entryName = entryName;
     this.App = options.App;
     this.pluginConfig = config;
+    this.routeManifest = ctx.routeManifest;
     this.tracker = ctx.tracker;
     this.metrics = ctx.metrics;
     this.htmlModifiers = ctx.htmlModifiers;

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

@@ -23,14 +23,32 @@ __export(loadable_exports, {
 module.exports = __toCommonJS(loadable_exports);
 var import_define_property = require("@swc/helpers/_/_define_property");
 var import_server = require("@loadable/server");
-var import_utils = require("../utils");
+var import_utils = require("@modern-js/utils");
+var import_utils2 = require("../utils");
 const extname = (uri) => {
   if (typeof uri !== "string" || !uri.includes(".")) {
     return "";
   }
   return `.${uri === null || uri === void 0 ? void 0 : uri.split(".").pop()}` || "";
 };
+const generateChunks = (chunks, ext) => chunks.filter((chunk) => Boolean(chunk.url)).filter((chunk) => extname(chunk.url).slice(1) === ext);
+const checkIsInline = (chunk, enableInline) => {
+  if (process.env.NODE_ENV === "production") {
+    if (enableInline instanceof RegExp) {
+      return enableInline.test(chunk.url);
+    } else {
+      return Boolean(enableInline);
+    }
+  } else {
+    return false;
+  }
+};
 class LoadableCollector {
+  get existsAssets() {
+    var _routeManifest_routeAssets_entryName, _routeManifest_routeAssets;
+    const { routeManifest, entryName } = this.options;
+    return routeManifest === null || routeManifest === void 0 ? void 0 : (_routeManifest_routeAssets = routeManifest.routeAssets) === null || _routeManifest_routeAssets === void 0 ? void 0 : (_routeManifest_routeAssets_entryName = _routeManifest_routeAssets[entryName]) === null || _routeManifest_routeAssets_entryName === void 0 ? void 0 : _routeManifest_routeAssets_entryName.assets;
+  }
   collect(comopnent) {
     const { stats, entryName } = this.options;
     if (!stats) {
@@ -44,54 +62,81 @@ class LoadableCollector {
     });
     return this.extractor.collectChunks(comopnent);
   }
-  effect() {
+  async effect() {
     if (!this.extractor) {
       return;
     }
-    const { result: { chunksMap }, config, template, nonce } = this.options;
     const { extractor } = this;
     const chunks = extractor.getChunkAssets(extractor.chunks);
-    chunksMap.js = (chunksMap.js || "") + (0, import_utils.getLoadableScripts)(extractor);
-    const attributes = this.generateAttributes();
-    for (const v of chunks) {
-      if (!v.url) {
-        continue;
+    const scriptChunks = generateChunks(chunks, "js");
+    const styleChunks = generateChunks(chunks, "css");
+    this.emitLoadableScripts(extractor);
+    await this.emitScriptAssets(scriptChunks);
+    await this.emitStyleAssets(styleChunks);
+  }
+  emitLoadableScripts(extractor) {
+    const check = (scripts2) => (scripts2 || "").includes("__LOADABLE_REQUIRED_CHUNKS___ext");
+    const scripts = extractor.getScriptTags();
+    if (!check(scripts)) {
+      return;
+    }
+    const { result: { chunksMap } } = this.options;
+    const s = scripts.split("</script>").slice(0, 2).map((i) => `${i}</script>`).join("");
+    chunksMap.js += s;
+  }
+  async emitScriptAssets(chunks) {
+    const { template, config, nonce, result } = this.options;
+    const { chunksMap } = result;
+    const { scriptLoading = "defer", enableInlineScripts } = config;
+    const scriptLoadingAtr = {
+      defer: scriptLoading === "defer" ? true : void 0,
+      type: scriptLoading === "module" ? "module" : void 0
+    };
+    const attributes = (0, import_utils2.attributesToString)(this.generateAttributes({
+      nonce,
+      ...scriptLoadingAtr
+    }));
+    const scripts = await Promise.all(chunks.filter((chunk) => {
+      var _this_existsAssets;
+      const jsChunkReg = new RegExp(`<script .*src="${chunk.url}".*>`);
+      return !jsChunkReg.test(template) && !((_this_existsAssets = this.existsAssets) === null || _this_existsAssets === void 0 ? void 0 : _this_existsAssets.includes(chunk.path));
+    }).map((chunk) => {
+      if (checkIsInline(chunk, enableInlineScripts)) {
+        const filepath = chunk.path;
+        return import_utils.fs.readFile(filepath, "utf-8").then((content) => `<script>${content}</script>`);
+      } else {
+        return `<script${attributes} src="${chunk.url}"></script>`;
       }
-      const fileType = extname(v.url).slice(1);
-      if (fileType === "js") {
-        const jsChunkReg = new RegExp(`<script .*src="${v.url}".*>`);
-        if (!jsChunkReg.test(template)) {
-          const { scriptLoading = "defer" } = config;
-          switch (scriptLoading) {
-            case "defer":
-              attributes.defer = true;
-              break;
-            case "module":
-              attributes.type = "module";
-              break;
-            default:
-          }
-          attributes.nonce = nonce;
-          const attrsStr = (0, import_utils.attributesToString)(attributes);
-          chunksMap[fileType] += `<script${attrsStr} src="${v.url}"></script>`;
-        }
-      } else if (fileType === "css") {
-        const cssChunkReg = new RegExp(`<link .*href="${v.url}".*>`);
-        if (!cssChunkReg.test(template)) {
-          const attrsStr = (0, import_utils.attributesToString)(attributes);
-          chunksMap[fileType] += `<link${attrsStr} href="${v.url}" rel="stylesheet" />`;
-        }
+    }));
+    chunksMap.js += scripts.join("");
+  }
+  async emitStyleAssets(chunks) {
+    const { template, result: { chunksMap }, config: { enableInlineStyles } } = this.options;
+    const atrributes = (0, import_utils2.attributesToString)(this.generateAttributes());
+    const css = await Promise.all(chunks.filter((chunk) => {
+      var _this_existsAssets;
+      const cssChunkReg = new RegExp(`<link .*href="${chunk.url}".*>`);
+      return !cssChunkReg.test(template) && !((_this_existsAssets = this.existsAssets) === null || _this_existsAssets === void 0 ? void 0 : _this_existsAssets.includes(chunk.path));
+    }).map((chunk) => {
+      if (checkIsInline(chunk, enableInlineStyles)) {
+        return import_utils.fs.readFile(chunk.path).then((content) => `<style>${content}</style>`);
+      } else {
+        return `<link${atrributes} href="${chunk.url}" rel="stylesheet" />`;
       }
-    }
+    }));
+    chunksMap.css += css.join("");
   }
-  generateAttributes() {
+  generateAttributes(extraAtr = {}) {
     const { config } = this.options;
     const { crossorigin } = config;
     const attributes = {};
     if (crossorigin) {
       attributes.crossorigin = crossorigin === true ? "anonymous" : crossorigin;
     }
-    return attributes;
+    return {
+      ...attributes,
+      ...extraAtr
+    };
   }
   constructor(options) {
     (0, import_define_property._)(this, "options", void 0);

package/dist/cjs/ssr/serverRender/renderToString/render.js

@@ -38,12 +38,10 @@ class Render {
     this.collectors.push(collector);
     return this;
   }
-  finish() {
+  async finish() {
     const App = this.collectors.reduce((pre, collector) => collector.collect(pre), this.App);
     const html = import_server.default.renderToString(App);
-    this.collectors.forEach((component) => {
-      component.effect();
-    });
+    await Promise.all(this.collectors.map((component) => component.effect()));
     return html;
   }
   constructor(App) {

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

@@ -21,21 +21,12 @@ __export(utils_exports, {
   CSS_CHUNKS_PLACEHOLDER: () => CSS_CHUNKS_PLACEHOLDER,
   ROUTER_DATA_JSON_ID: () => ROUTER_DATA_JSON_ID,
   SSR_DATA_JSON_ID: () => SSR_DATA_JSON_ID,
-  attributesToString: () => attributesToString,
-  getLoadableScripts: () => getLoadableScripts
+  attributesToString: () => attributesToString
 });
 module.exports = __toCommonJS(utils_exports);
 const CSS_CHUNKS_PLACEHOLDER = "<!--<?- chunksMap.css ?>-->";
 const SSR_DATA_JSON_ID = "__MODERN_SSR_DATA__";
 const ROUTER_DATA_JSON_ID = "__MODERN_ROUTER_DATA__";
-function getLoadableScripts(extractor) {
-  const check = (scripts2) => (scripts2 || "").includes("__LOADABLE_REQUIRED_CHUNKS___ext");
-  const scripts = extractor.getScriptTags();
-  if (!check(scripts)) {
-    return "";
-  }
-  return scripts.split("</script>").slice(0, 2).map((i) => `${i}</script>`).join("");
-}
 function attributesToString(attributes) {
   return Object.entries(attributes).reduce((str, [key, value]) => {
     return value === void 0 ? str : `${str} ${key}="${value}"`;
@@ -46,6 +37,5 @@ function attributesToString(attributes) {
   CSS_CHUNKS_PLACEHOLDER,
   ROUTER_DATA_JSON_ID,
   SSR_DATA_JSON_ID,
-  attributesToString,
-  getLoadableScripts
+  attributesToString
 });

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

@@ -151,6 +151,7 @@ var ssrPlugin = function() {
               return 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;
             var config = api.useResolvedConfigContext();
+            var _config_output = config.output, enableInlineScripts = _config_output.enableInlineScripts, enableInlineStyles = _config_output.enableInlineStyles;
             var _config_html = config.html, crossorigin = _config_html.crossorigin, scriptLoading = _config_html.scriptLoading;
             var disablePrerender = typeof ((_config_server = config.server) === null || _config_server === void 0 ? void 0 : _config_server.ssr) === "object" ? Boolean(config.server.ssr.disablePrerender) : false;
             plugins.push({
@@ -159,7 +160,9 @@ var ssrPlugin = function() {
                 crossorigin,
                 scriptLoading,
                 chunkLoadingGlobal,
-                disablePrerender
+                disablePrerender,
+                enableInlineScripts: typeof enableInlineScripts === "function" ? void 0 : enableInlineScripts,
+                enableInlineStyles: typeof enableInlineStyles === "function" ? void 0 : enableInlineStyles
               }))
             });
           }

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

@@ -54,12 +54,14 @@ var Entry = /* @__PURE__ */ function() {
     _define_property(this, "pluginConfig", void 0);
     _define_property(this, "htmlModifiers", void 0);
     _define_property(this, "nonce", void 0);
+    _define_property(this, "routeManifest", void 0);
     var ctx = options.ctx, config = options.config;
     var entryName = ctx.entryName, template = ctx.template, nonce = ctx.nonce;
     this.template = template;
     this.entryName = entryName;
     this.App = options.App;
     this.pluginConfig = config;
+    this.routeManifest = ctx.routeManifest;
     this.tracker = ctx.tracker;
     this.metrics = ctx.metrics;
     this.htmlModifiers = ctx.htmlModifiers;
@@ -79,7 +81,7 @@ var Entry = /* @__PURE__ */ function() {
       value: function renderToHtml(context) {
         var _this = this;
         return _async_to_generator(function() {
-          var _ssrContext_redirection, _ssrContext_redirection1, _ssrContext_redirection2, ssrContext, prefetchData, routerContext, routerData, templateData, ssrDataScripts, html, helmetData;
+          var _ssrContext_redirection, _ssrContext_redirection1, _ssrContext_redirection2, ssrContext, prefetchData, _, routerContext, routerData, templateData, ssrDataScripts, html, helmetData;
           return _ts_generator(this, function(_state) {
             switch (_state.label) {
               case 0:
@@ -102,9 +104,20 @@ var Entry = /* @__PURE__ */ function() {
                     ""
                   ];
                 }
-                if (_this.result.renderLevel >= RenderLevel.SERVER_PREFETCH) {
-                  _this.result.html = _this.renderToString(context);
-                }
+                if (!(_this.result.renderLevel >= RenderLevel.SERVER_PREFETCH))
+                  return [
+                    3,
+                    3
+                  ];
+                _ = _this.result;
+                return [
+                  4,
+                  _this.renderToString(context)
+                ];
+              case 2:
+                _.html = _state.sent();
+                _state.label = 3;
+              case 3:
                 if ((_ssrContext_redirection2 = ssrContext.redirection) === null || _ssrContext_redirection2 === void 0 ? void 0 : _ssrContext_redirection2.url) {
                   return [
                     2,
@@ -186,30 +199,64 @@ var Entry = /* @__PURE__ */ function() {
     {
       key: "renderToString",
       value: function renderToString(context) {
-        var html = "";
-        var end = time();
-        var ssrContext = context.ssrContext;
-        try {
-          var App = React.createElement(this.App, {
-            context: Object.assign(context, {
-              ssr: true
-            })
+        var _this = this;
+        return _async_to_generator(function() {
+          var html, end, ssrContext, App, cost, e;
+          return _ts_generator(this, function(_state) {
+            switch (_state.label) {
+              case 0:
+                html = "";
+                end = time();
+                ssrContext = context.ssrContext;
+                _state.label = 1;
+              case 1:
+                _state.trys.push([
+                  1,
+                  3,
+                  ,
+                  4
+                ]);
+                App = React.createElement(_this.App, {
+                  context: Object.assign(context, {
+                    ssr: true
+                  })
+                });
+                return [
+                  4,
+                  createRender(App).addCollector(createStyledCollector(_this.result)).addCollector(createLoadableCollector({
+                    stats: ssrContext.loadableStats,
+                    result: _this.result,
+                    entryName: _this.entryName,
+                    config: _this.pluginConfig,
+                    nonce: _this.nonce,
+                    template: _this.template,
+                    routeManifest: _this.routeManifest
+                  })).finish()
+                ];
+              case 2:
+                html = _state.sent();
+                cost = end();
+                _this.tracker.trackTiming(SSRTimings.SSR_RENDER_HTML, cost);
+                _this.result.renderLevel = RenderLevel.SERVER_RENDER;
+                return [
+                  3,
+                  4
+                ];
+              case 3:
+                e = _state.sent();
+                _this.tracker.trackError(SSRErrors.RENDER_HTML, e);
+                return [
+                  3,
+                  4
+                ];
+              case 4:
+                return [
+                  2,
+                  html
+                ];
+            }
           });
-          html = createRender(App).addCollector(createStyledCollector(this.result)).addCollector(createLoadableCollector({
-            stats: ssrContext.loadableStats,
-            result: this.result,
-            entryName: this.entryName,
-            config: this.pluginConfig,
-            nonce: this.nonce,
-            template: this.template
-          })).finish();
-          var cost = end();
-          this.tracker.trackTiming(SSRTimings.SSR_RENDER_HTML, cost);
-          this.result.renderLevel = RenderLevel.SERVER_RENDER;
-        } catch (e) {
-          this.tracker.trackError(SSRErrors.RENDER_HTML, e);
-        }
-        return html;
+        })();
       }
     },
     {

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

@@ -1,14 +1,37 @@
+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 _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, getLoadableScripts } from "../utils";
+import { fs } from "@modern-js/utils";
+import { attributesToString } from "../utils";
 var extname = function(uri) {
   if (typeof uri !== "string" || !uri.includes(".")) {
     return "";
   }
   return ".".concat(uri === null || uri === void 0 ? void 0 : uri.split(".").pop()) || "";
 };
+var generateChunks = function(chunks, ext) {
+  return chunks.filter(function(chunk) {
+    return Boolean(chunk.url);
+  }).filter(function(chunk) {
+    return extname(chunk.url).slice(1) === ext;
+  });
+};
+var checkIsInline = function(chunk, enableInline) {
+  if (process.env.NODE_ENV === "production") {
+    if (_instanceof(enableInline, RegExp)) {
+      return enableInline.test(chunk.url);
+    } else {
+      return Boolean(enableInline);
+    }
+  } else {
+    return false;
+  }
+};
 var LoadableCollector = /* @__PURE__ */ function() {
   "use strict";
   function LoadableCollector2(options) {
@@ -18,6 +41,14 @@ var LoadableCollector = /* @__PURE__ */ function() {
     this.options = options;
   }
   _create_class(LoadableCollector2, [
+    {
+      key: "existsAssets",
+      get: function get() {
+        var _routeManifest_routeAssets_entryName, _routeManifest_routeAssets;
+        var _this_options = this.options, routeManifest = _this_options.routeManifest, entryName = _this_options.entryName;
+        return routeManifest === null || routeManifest === void 0 ? void 0 : (_routeManifest_routeAssets = routeManifest.routeAssets) === null || _routeManifest_routeAssets === void 0 ? void 0 : (_routeManifest_routeAssets_entryName = _routeManifest_routeAssets[entryName]) === null || _routeManifest_routeAssets_entryName === void 0 ? void 0 : _routeManifest_routeAssets_entryName.assets;
+      }
+    },
     {
       key: "collect",
       value: function collect(comopnent) {
@@ -37,73 +68,155 @@ var LoadableCollector = /* @__PURE__ */ function() {
     {
       key: "effect",
       value: function effect() {
-        if (!this.extractor) {
-          return;
-        }
-        var _this_options = this.options, chunksMap = _this_options.result.chunksMap, config = _this_options.config, template = _this_options.template, nonce = _this_options.nonce;
-        var extractor = this.extractor;
-        var chunks = extractor.getChunkAssets(extractor.chunks);
-        chunksMap.js = (chunksMap.js || "") + getLoadableScripts(extractor);
-        var attributes = this.generateAttributes();
-        var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
-        try {
-          for (var _iterator = chunks[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-            var v = _step.value;
-            if (!v.url) {
-              continue;
-            }
-            var fileType = extname(v.url).slice(1);
-            if (fileType === "js") {
-              var jsChunkReg = new RegExp('<script .*src="'.concat(v.url, '".*>'));
-              if (!jsChunkReg.test(template)) {
-                var _config_scriptLoading = config.scriptLoading, scriptLoading = _config_scriptLoading === void 0 ? "defer" : _config_scriptLoading;
-                switch (scriptLoading) {
-                  case "defer":
-                    attributes.defer = true;
-                    break;
-                  case "module":
-                    attributes.type = "module";
-                    break;
-                  default:
+        var _this = this;
+        return _async_to_generator(function() {
+          var extractor, chunks, scriptChunks, styleChunks;
+          return _ts_generator(this, function(_state) {
+            switch (_state.label) {
+              case 0:
+                if (!_this.extractor) {
+                  return [
+                    2
+                  ];
                 }
-                attributes.nonce = nonce;
-                var attrsStr = attributesToString(attributes);
-                chunksMap[fileType] += "<script".concat(attrsStr, ' src="').concat(v.url, '"></script>');
-              }
-            } else if (fileType === "css") {
-              var cssChunkReg = new RegExp('<link .*href="'.concat(v.url, '".*>'));
-              if (!cssChunkReg.test(template)) {
-                var attrsStr1 = attributesToString(attributes);
-                chunksMap[fileType] += "<link".concat(attrsStr1, ' href="').concat(v.url, '" rel="stylesheet" />');
-              }
+                extractor = _this.extractor;
+                chunks = extractor.getChunkAssets(extractor.chunks);
+                scriptChunks = generateChunks(chunks, "js");
+                styleChunks = generateChunks(chunks, "css");
+                _this.emitLoadableScripts(extractor);
+                return [
+                  4,
+                  _this.emitScriptAssets(scriptChunks)
+                ];
+              case 1:
+                _state.sent();
+                return [
+                  4,
+                  _this.emitStyleAssets(styleChunks)
+                ];
+              case 2:
+                _state.sent();
+                return [
+                  2
+                ];
             }
-          }
-        } catch (err) {
-          _didIteratorError = true;
-          _iteratorError = err;
-        } finally {
-          try {
-            if (!_iteratorNormalCompletion && _iterator.return != null) {
-              _iterator.return();
+          });
+        })();
+      }
+    },
+    {
+      key: "emitLoadableScripts",
+      value: function emitLoadableScripts(extractor) {
+        var check = function(scripts2) {
+          return (scripts2 || "").includes("__LOADABLE_REQUIRED_CHUNKS___ext");
+        };
+        var scripts = extractor.getScriptTags();
+        if (!check(scripts)) {
+          return;
+        }
+        var _this_options = this.options, chunksMap = _this_options.result.chunksMap;
+        var s = scripts.split("</script>").slice(0, 2).map(function(i) {
+          return "".concat(i, "</script>");
+        }).join("");
+        chunksMap.js += s;
+      }
+    },
+    {
+      key: "emitScriptAssets",
+      value: function emitScriptAssets(chunks) {
+        var _this = this;
+        return _async_to_generator(function() {
+          var _this_options, template, config, nonce, result, chunksMap, _config_scriptLoading, scriptLoading, enableInlineScripts, scriptLoadingAtr, attributes, scripts;
+          return _ts_generator(this, function(_state) {
+            switch (_state.label) {
+              case 0:
+                _this_options = _this.options, template = _this_options.template, config = _this_options.config, nonce = _this_options.nonce, result = _this_options.result;
+                chunksMap = result.chunksMap;
+                _config_scriptLoading = config.scriptLoading, scriptLoading = _config_scriptLoading === void 0 ? "defer" : _config_scriptLoading, enableInlineScripts = config.enableInlineScripts;
+                scriptLoadingAtr = {
+                  defer: scriptLoading === "defer" ? true : void 0,
+                  type: scriptLoading === "module" ? "module" : void 0
+                };
+                attributes = attributesToString(_this.generateAttributes(_object_spread({
+                  nonce
+                }, scriptLoadingAtr)));
+                return [
+                  4,
+                  Promise.all(chunks.filter(function(chunk) {
+                    var _this_existsAssets;
+                    var jsChunkReg = new RegExp('<script .*src="'.concat(chunk.url, '".*>'));
+                    return !jsChunkReg.test(template) && !((_this_existsAssets = _this.existsAssets) === null || _this_existsAssets === void 0 ? void 0 : _this_existsAssets.includes(chunk.path));
+                  }).map(function(chunk) {
+                    if (checkIsInline(chunk, enableInlineScripts)) {
+                      var filepath = chunk.path;
+                      return fs.readFile(filepath, "utf-8").then(function(content) {
+                        return "<script>".concat(content, "</script>");
+                      });
+                    } else {
+                      return "<script".concat(attributes, ' src="').concat(chunk.url, '"></script>');
+                    }
+                  }))
+                ];
+              case 1:
+                scripts = _state.sent();
+                chunksMap.js += scripts.join("");
+                return [
+                  2
+                ];
             }
-          } finally {
-            if (_didIteratorError) {
-              throw _iteratorError;
+          });
+        })();
+      }
+    },
+    {
+      key: "emitStyleAssets",
+      value: function emitStyleAssets(chunks) {
+        var _this = this;
+        return _async_to_generator(function() {
+          var _this_options, template, chunksMap, enableInlineStyles, atrributes, css;
+          return _ts_generator(this, function(_state) {
+            switch (_state.label) {
+              case 0:
+                _this_options = _this.options, template = _this_options.template, chunksMap = _this_options.result.chunksMap, enableInlineStyles = _this_options.config.enableInlineStyles;
+                atrributes = attributesToString(_this.generateAttributes());
+                return [
+                  4,
+                  Promise.all(chunks.filter(function(chunk) {
+                    var _this_existsAssets;
+                    var cssChunkReg = new RegExp('<link .*href="'.concat(chunk.url, '".*>'));
+                    return !cssChunkReg.test(template) && !((_this_existsAssets = _this.existsAssets) === null || _this_existsAssets === void 0 ? void 0 : _this_existsAssets.includes(chunk.path));
+                  }).map(function(chunk) {
+                    if (checkIsInline(chunk, enableInlineStyles)) {
+                      return fs.readFile(chunk.path).then(function(content) {
+                        return "<style>".concat(content, "</style>");
+                      });
+                    } else {
+                      return "<link".concat(atrributes, ' href="').concat(chunk.url, '" rel="stylesheet" />');
+                    }
+                  }))
+                ];
+              case 1:
+                css = _state.sent();
+                chunksMap.css += css.join("");
+                return [
+                  2
+                ];
             }
-          }
-        }
+          });
+        })();
       }
     },
     {
       key: "generateAttributes",
       value: function generateAttributes() {
+        var extraAtr = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
         var config = this.options.config;
         var crossorigin = config.crossorigin;
         var attributes = {};
         if (crossorigin) {
           attributes.crossorigin = crossorigin === true ? "anonymous" : crossorigin;
         }
-        return attributes;
+        return _object_spread({}, attributes, extraAtr);
       }
     }
   ]);

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

@@ -1,6 +1,8 @@
+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 _ts_generator } from "@swc/helpers/_/_ts_generator";
 import ReactDomServer from "react-dom/server";
 var Render = /* @__PURE__ */ function() {
   "use strict";
@@ -21,14 +23,31 @@ var Render = /* @__PURE__ */ function() {
     {
       key: "finish",
       value: function finish() {
-        var App = this.collectors.reduce(function(pre, collector) {
-          return collector.collect(pre);
-        }, this.App);
-        var html = ReactDomServer.renderToString(App);
-        this.collectors.forEach(function(component) {
-          component.effect();
-        });
-        return html;
+        var _this = this;
+        return _async_to_generator(function() {
+          var App, html;
+          return _ts_generator(this, function(_state) {
+            switch (_state.label) {
+              case 0:
+                App = _this.collectors.reduce(function(pre, collector) {
+                  return collector.collect(pre);
+                }, _this.App);
+                html = ReactDomServer.renderToString(App);
+                return [
+                  4,
+                  Promise.all(_this.collectors.map(function(component) {
+                    return component.effect();
+                  }))
+                ];
+              case 1:
+                _state.sent();
+                return [
+                  2,
+                  html
+                ];
+            }
+          });
+        })();
       }
     }
   ]);

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

@@ -2,18 +2,6 @@ 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 getLoadableScripts(extractor) {
-  var check = function(scripts2) {
-    return (scripts2 || "").includes("__LOADABLE_REQUIRED_CHUNKS___ext");
-  };
-  var scripts = extractor.getScriptTags();
-  if (!check(scripts)) {
-    return "";
-  }
-  return scripts.split("</script>").slice(0, 2).map(function(i) {
-    return "".concat(i, "</script>");
-  }).join("");
-}
 function attributesToString(attributes) {
   return Object.entries(attributes).reduce(function(str, param) {
     var _param = _sliced_to_array(param, 2), key = _param[0], value = _param[1];
@@ -24,6 +12,5 @@ export {
   CSS_CHUNKS_PLACEHOLDER,
   ROUTER_DATA_JSON_ID,
   SSR_DATA_JSON_ID,
-  attributesToString,
-  getLoadableScripts
+  attributesToString
 };

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

@@ -123,6 +123,7 @@ const ssrPlugin = () => ({
           var _bundlerConfigs_find_output, _bundlerConfigs_find, _config_server;
           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;
           plugins.push({
@@ -132,7 +133,9 @@ const ssrPlugin = () => ({
               crossorigin,
               scriptLoading,
               chunkLoadingGlobal,
-              disablePrerender
+              disablePrerender,
+              enableInlineScripts: typeof enableInlineScripts === "function" ? void 0 : enableInlineScripts,
+              enableInlineStyles: typeof enableInlineStyles === "function" ? void 0 : enableInlineStyles
             })
           });
         }

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

@@ -48,7 +48,7 @@ class Entry {
       return "";
     }
     if (this.result.renderLevel >= RenderLevel.SERVER_PREFETCH) {
-      this.result.html = this.renderToString(context);
+      this.result.html = await this.renderToString(context);
     }
     if ((_ssrContext_redirection2 = ssrContext.redirection) === null || _ssrContext_redirection2 === void 0 ? void 0 : _ssrContext_redirection2.url) {
       return "";
@@ -84,7 +84,7 @@ class Entry {
     }
     return prefetchData || {};
   }
-  renderToString(context) {
+  async renderToString(context) {
     let html = "";
     const end = time();
     const { ssrContext } = context;
@@ -94,13 +94,14 @@ class Entry {
           ssr: true
         })
       });
-      html = createRender(App).addCollector(createStyledCollector(this.result)).addCollector(createLoadableCollector({
+      html = await createRender(App).addCollector(createStyledCollector(this.result)).addCollector(createLoadableCollector({
         stats: ssrContext.loadableStats,
         result: this.result,
         entryName: this.entryName,
         config: this.pluginConfig,
         nonce: this.nonce,
-        template: this.template
+        template: this.template,
+        routeManifest: this.routeManifest
       })).finish();
       const cost = end();
       this.tracker.trackTiming(SSRTimings.SSR_RENDER_HTML, cost);
@@ -135,12 +136,14 @@ class Entry {
     _define_property(this, "pluginConfig", void 0);
     _define_property(this, "htmlModifiers", void 0);
     _define_property(this, "nonce", void 0);
+    _define_property(this, "routeManifest", void 0);
     const { ctx, config } = options;
     const { entryName, template, nonce } = ctx;
     this.template = template;
     this.entryName = entryName;
     this.App = options.App;
     this.pluginConfig = config;
+    this.routeManifest = ctx.routeManifest;
     this.tracker = ctx.tracker;
     this.metrics = ctx.metrics;
     this.htmlModifiers = ctx.htmlModifiers;

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

@@ -1,13 +1,31 @@
 import { _ as _define_property } from "@swc/helpers/_/_define_property";
 import { ChunkExtractor } from "@loadable/server";
-import { attributesToString, getLoadableScripts } from "../utils";
+import { fs } from "@modern-js/utils";
+import { attributesToString } from "../utils";
 const extname = (uri) => {
   if (typeof uri !== "string" || !uri.includes(".")) {
     return "";
   }
   return `.${uri === null || uri === void 0 ? void 0 : uri.split(".").pop()}` || "";
 };
+const generateChunks = (chunks, ext) => chunks.filter((chunk) => Boolean(chunk.url)).filter((chunk) => extname(chunk.url).slice(1) === ext);
+const checkIsInline = (chunk, enableInline) => {
+  if (process.env.NODE_ENV === "production") {
+    if (enableInline instanceof RegExp) {
+      return enableInline.test(chunk.url);
+    } else {
+      return Boolean(enableInline);
+    }
+  } else {
+    return false;
+  }
+};
 class LoadableCollector {
+  get existsAssets() {
+    var _routeManifest_routeAssets_entryName, _routeManifest_routeAssets;
+    const { routeManifest, entryName } = this.options;
+    return routeManifest === null || routeManifest === void 0 ? void 0 : (_routeManifest_routeAssets = routeManifest.routeAssets) === null || _routeManifest_routeAssets === void 0 ? void 0 : (_routeManifest_routeAssets_entryName = _routeManifest_routeAssets[entryName]) === null || _routeManifest_routeAssets_entryName === void 0 ? void 0 : _routeManifest_routeAssets_entryName.assets;
+  }
   collect(comopnent) {
     const { stats, entryName } = this.options;
     if (!stats) {
@@ -21,54 +39,81 @@ class LoadableCollector {
     });
     return this.extractor.collectChunks(comopnent);
   }
-  effect() {
+  async effect() {
     if (!this.extractor) {
       return;
     }
-    const { result: { chunksMap }, config, template, nonce } = this.options;
     const { extractor } = this;
     const chunks = extractor.getChunkAssets(extractor.chunks);
-    chunksMap.js = (chunksMap.js || "") + getLoadableScripts(extractor);
-    const attributes = this.generateAttributes();
-    for (const v of chunks) {
-      if (!v.url) {
-        continue;
+    const scriptChunks = generateChunks(chunks, "js");
+    const styleChunks = generateChunks(chunks, "css");
+    this.emitLoadableScripts(extractor);
+    await this.emitScriptAssets(scriptChunks);
+    await this.emitStyleAssets(styleChunks);
+  }
+  emitLoadableScripts(extractor) {
+    const check = (scripts2) => (scripts2 || "").includes("__LOADABLE_REQUIRED_CHUNKS___ext");
+    const scripts = extractor.getScriptTags();
+    if (!check(scripts)) {
+      return;
+    }
+    const { result: { chunksMap } } = this.options;
+    const s = scripts.split("</script>").slice(0, 2).map((i) => `${i}</script>`).join("");
+    chunksMap.js += s;
+  }
+  async emitScriptAssets(chunks) {
+    const { template, config, nonce, result } = this.options;
+    const { chunksMap } = result;
+    const { scriptLoading = "defer", enableInlineScripts } = config;
+    const scriptLoadingAtr = {
+      defer: scriptLoading === "defer" ? true : void 0,
+      type: scriptLoading === "module" ? "module" : void 0
+    };
+    const attributes = attributesToString(this.generateAttributes({
+      nonce,
+      ...scriptLoadingAtr
+    }));
+    const scripts = await Promise.all(chunks.filter((chunk) => {
+      var _this_existsAssets;
+      const jsChunkReg = new RegExp(`<script .*src="${chunk.url}".*>`);
+      return !jsChunkReg.test(template) && !((_this_existsAssets = this.existsAssets) === null || _this_existsAssets === void 0 ? void 0 : _this_existsAssets.includes(chunk.path));
+    }).map((chunk) => {
+      if (checkIsInline(chunk, enableInlineScripts)) {
+        const filepath = chunk.path;
+        return fs.readFile(filepath, "utf-8").then((content) => `<script>${content}</script>`);
+      } else {
+        return `<script${attributes} src="${chunk.url}"></script>`;
       }
-      const fileType = extname(v.url).slice(1);
-      if (fileType === "js") {
-        const jsChunkReg = new RegExp(`<script .*src="${v.url}".*>`);
-        if (!jsChunkReg.test(template)) {
-          const { scriptLoading = "defer" } = config;
-          switch (scriptLoading) {
-            case "defer":
-              attributes.defer = true;
-              break;
-            case "module":
-              attributes.type = "module";
-              break;
-            default:
-          }
-          attributes.nonce = nonce;
-          const attrsStr = attributesToString(attributes);
-          chunksMap[fileType] += `<script${attrsStr} src="${v.url}"></script>`;
-        }
-      } else if (fileType === "css") {
-        const cssChunkReg = new RegExp(`<link .*href="${v.url}".*>`);
-        if (!cssChunkReg.test(template)) {
-          const attrsStr = attributesToString(attributes);
-          chunksMap[fileType] += `<link${attrsStr} href="${v.url}" rel="stylesheet" />`;
-        }
+    }));
+    chunksMap.js += scripts.join("");
+  }
+  async emitStyleAssets(chunks) {
+    const { template, result: { chunksMap }, config: { enableInlineStyles } } = this.options;
+    const atrributes = attributesToString(this.generateAttributes());
+    const css = await Promise.all(chunks.filter((chunk) => {
+      var _this_existsAssets;
+      const cssChunkReg = new RegExp(`<link .*href="${chunk.url}".*>`);
+      return !cssChunkReg.test(template) && !((_this_existsAssets = this.existsAssets) === null || _this_existsAssets === void 0 ? void 0 : _this_existsAssets.includes(chunk.path));
+    }).map((chunk) => {
+      if (checkIsInline(chunk, enableInlineStyles)) {
+        return fs.readFile(chunk.path).then((content) => `<style>${content}</style>`);
+      } else {
+        return `<link${atrributes} href="${chunk.url}" rel="stylesheet" />`;
       }
-    }
+    }));
+    chunksMap.css += css.join("");
   }
-  generateAttributes() {
+  generateAttributes(extraAtr = {}) {
     const { config } = this.options;
     const { crossorigin } = config;
     const attributes = {};
     if (crossorigin) {
       attributes.crossorigin = crossorigin === true ? "anonymous" : crossorigin;
     }
-    return attributes;
+    return {
+      ...attributes,
+      ...extraAtr
+    };
   }
   constructor(options) {
     _define_property(this, "options", void 0);

package/dist/esm-node/ssr/serverRender/renderToString/render.js

@@ -5,12 +5,10 @@ class Render {
     this.collectors.push(collector);
     return this;
   }
-  finish() {
+  async finish() {
     const App = this.collectors.reduce((pre, collector) => collector.collect(pre), this.App);
     const html = ReactDomServer.renderToString(App);
-    this.collectors.forEach((component) => {
-      component.effect();
-    });
+    await Promise.all(this.collectors.map((component) => component.effect()));
     return html;
   }
   constructor(App) {

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

@@ -1,14 +1,6 @@
 const CSS_CHUNKS_PLACEHOLDER = "<!--<?- chunksMap.css ?>-->";
 const SSR_DATA_JSON_ID = "__MODERN_SSR_DATA__";
 const ROUTER_DATA_JSON_ID = "__MODERN_ROUTER_DATA__";
-function getLoadableScripts(extractor) {
-  const check = (scripts2) => (scripts2 || "").includes("__LOADABLE_REQUIRED_CHUNKS___ext");
-  const scripts = extractor.getScriptTags();
-  if (!check(scripts)) {
-    return "";
-  }
-  return scripts.split("</script>").slice(0, 2).map((i) => `${i}</script>`).join("");
-}
 function attributesToString(attributes) {
   return Object.entries(attributes).reduce((str, [key, value]) => {
     return value === void 0 ? str : `${str} ${key}="${value}"`;
@@ -18,6 +10,5 @@ export {
   CSS_CHUNKS_PLACEHOLDER,
   ROUTER_DATA_JSON_ID,
   SSR_DATA_JSON_ID,
-  attributesToString,
-  getLoadableScripts
+  attributesToString
 };

package/dist/types/ssr/serverRender/renderToString/entry.d.ts

@@ -16,6 +16,7 @@ export default class Entry {
   private readonly pluginConfig;
   private readonly htmlModifiers;
   private readonly nonce?;
+  private readonly routeManifest?;
   constructor(options: EntryOptions);
   renderToHtml(context: RuntimeContext): Promise<string>;
   private prefetch;

package/dist/types/ssr/serverRender/renderToString/loadable.d.ts

@@ -6,13 +6,18 @@ declare class LoadableCollector implements Collector {
   private options;
   private extractor?;
   constructor(options: LoadableCollectorOptions);
+  private get existsAssets();
   collect(comopnent: ReactElement): ReactElement;
-  effect(): void;
+  effect(): Promise<void>;
+  private emitLoadableScripts;
+  private emitScriptAssets;
+  private emitStyleAssets;
   private generateAttributes;
 }
 export interface LoadableCollectorOptions {
   nonce?: string;
   stats?: Record<string, any>;
+  routeManifest?: Record<string, any>;
   template: string;
   config: SSRPluginConfig;
   entryName: string;

package/dist/types/ssr/serverRender/renderToString/render.d.ts

@@ -1,14 +1,14 @@
 import type { ReactElement } from 'react';
 export interface Collector {
   collect: (comopnent: ReactElement) => ReactElement;
-  effect: () => void;
+  effect: () => void | Promise<void>;
 }
 declare class Render {
   private App;
   private collectors;
   constructor(App: ReactElement);
   addCollector(collector: Collector): this;
-  finish(): string;
+  finish(): Promise<string>;
 }
 export declare function createRender(App: ReactElement): Render;
 export {};

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

@@ -19,6 +19,8 @@ export { RuntimeContext, RenderLevel };
 export type SSRPluginConfig = {
   crossorigin?: boolean | 'anonymous' | 'use-credentials';
   scriptLoading?: 'defer' | 'blocking' | 'module';
+  enableInlineStyles?: boolean | RegExp;
+  enableInlineScripts?: boolean | RegExp;
   disablePrerender?: boolean;
   chunkLoadingGlobal?: string;
 } & Exclude<ServerUserConfig['ssr'], boolean>;

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

@@ -1,6 +1,4 @@
-import type { ChunkExtractor } from '@loadable/server';
 export declare const CSS_CHUNKS_PLACEHOLDER = "<!--<?- chunksMap.css ?>-->";
 export declare const SSR_DATA_JSON_ID = "__MODERN_SSR_DATA__";
 export declare const ROUTER_DATA_JSON_ID = "__MODERN_ROUTER_DATA__";
-export declare function getLoadableScripts(extractor: ChunkExtractor): string;
 export declare function attributesToString(attributes: Record<string, any>): string;

package/package.json

@@ -15,7 +15,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.37.2",
+  "version": "2.38.0",
   "engines": {
     "node": ">=14.17.6"
   },
@@ -146,7 +146,7 @@
     }
   },
   "dependencies": {
-    "@babel/core": "^7.22.15",
+    "@babel/core": "^7.23.2",
     "@babel/types": "^7.22.15",
     "cookie": "0.5.0",
     "@loadable/babel-plugin": "5.15.3",
@@ -171,10 +171,10 @@
     "react-side-effect": "^2.1.1",
     "styled-components": "^5.3.1",
     "@swc/helpers": "0.5.1",
-    "@modern-js/plugin": "2.37.2",
-    "@modern-js/utils": "2.37.2",
-    "@modern-js/types": "2.37.2",
-    "@modern-js/runtime-utils": "2.37.2"
+    "@modern-js/plugin": "2.38.0",
+    "@modern-js/types": "2.38.0",
+    "@modern-js/utils": "2.38.0",
+    "@modern-js/runtime-utils": "2.38.0"
   },
   "peerDependencies": {
     "react": ">=17",
@@ -195,11 +195,11 @@
     "ts-jest": "^29.1.0",
     "typescript": "^5",
     "webpack": "^5.88.1",
-    "@modern-js/app-tools": "2.37.2",
-    "@modern-js/core": "2.37.2",
-    "@modern-js/server-core": "2.37.2",
-    "@scripts/build": "2.37.2",
-    "@scripts/jest-config": "2.37.2"
+    "@modern-js/app-tools": "2.38.0",
+    "@modern-js/core": "2.38.0",
+    "@modern-js/server-core": "2.38.0",
+    "@scripts/build": "2.38.0",
+    "@scripts/jest-config": "2.38.0"
   },
   "sideEffects": false,
   "publishConfig": {