@modern-js/runtime 2.42.2 → 2.44.0

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

@@ -18,24 +18,26 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var utils_exports = {};
 __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
+  attributesToString: () => attributesToString,
+  checkIsNode: () => checkIsNode,
+  safeReplace: () => safeReplace
 });
 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 attributesToString(attributes) {
   return Object.entries(attributes).reduce((str, [key, value]) => {
     return value === void 0 ? str : `${str} ${key}="${value}"`;
   }, "");
 }
+function safeReplace(source, searchValue, replaceValue) {
+  return source.replace(searchValue, () => 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";
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  CSS_CHUNKS_PLACEHOLDER,
-  ROUTER_DATA_JSON_ID,
-  SSR_DATA_JSON_ID,
-  attributesToString
+  attributesToString,
+  checkIsNode,
+  safeReplace
 });

package/dist/esm/cli/index.js

@@ -1,6 +1,5 @@
 import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
-import path from "path";
 import { isReact18, cleanRequireCache } from "@modern-js/utils";
 import { statePlugin } from "../state/cli";
 import { ssrPlugin } from "../ssr/cli";
@@ -26,8 +25,8 @@ var runtimePlugin = function() {
     setup: function(api) {
       return {
         config: function config() {
-          var dir = api.useAppContext().internalDirectory || "";
-          process.env.IS_REACT18 = isReact18(path.join(dir, "../../")).toString();
+          var appDir = api.useAppContext().appDirectory;
+          process.env.IS_REACT18 = isReact18(appDir).toString();
           return {
             runtime: {},
             runtimeByEntries: {},

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

@@ -94,11 +94,11 @@ var ssrPlugin = function() {
             },
             tools: {
               bundlerChain: function bundlerChain(chain, param) {
-                var isServer = param.isServer, isServiceWorker = param.isServiceWorker, CHAIN_ID = param.CHAIN_ID;
+                var isServer = param.isServer, isServiceWorker = param.isServiceWorker;
                 var userConfig = api.useResolvedConfigContext();
                 if (isUseSSRBundle(userConfig) && !isServer && !isServiceWorker && checkUseStringSSR(userConfig)) {
                   var LoadableBundlerPlugin = require("./loadable-bundler-plugin.js");
-                  chain.plugin(CHAIN_ID.PLUGIN.LOADABLE).use(LoadableBundlerPlugin, [
+                  chain.plugin("loadable").use(LoadableBundlerPlugin, [
                     {
                       filename: LOADABLE_STATS_FILE
                     }
@@ -146,7 +146,7 @@ var ssrPlugin = function() {
         modifyEntryRuntimePlugins: function modifyEntryRuntimePlugins(param) {
           var entrypoint = param.entrypoint, plugins = param.plugins, bundlerConfigs = param.bundlerConfigs;
           if (ssrConfigMap.get(entrypoint.entryName)) {
-            var _bundlerConfigs_find_output, _bundlerConfigs_find, _config_server;
+            var _bundlerConfigs_find_output, _bundlerConfigs_find, _config_server, _config_server1;
             var chunkLoadingGlobal = bundlerConfigs === null || bundlerConfigs === void 0 ? void 0 : (_bundlerConfigs_find = bundlerConfigs.find(function(config2) {
               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;
@@ -154,6 +154,7 @@ var ssrPlugin = function() {
             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;
+            var 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(_object_spread_props(_object_spread({}, ssrConfigMap.get(entrypoint.entryName) || {}), {
@@ -162,7 +163,8 @@ var ssrPlugin = function() {
                 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/ssr/index.js

@@ -9,7 +9,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";
 var ssr = function(config) {
   return {
     name: "@modern-js/plugin-ssr",
@@ -22,7 +22,7 @@ var ssr = function(config) {
       return {
         client: function() {
           var _ref = _async_to_generator(function(param) {
-            var App, context, ModernRender, ModernHydrate, _window__SSR_DATA, _window, hydrateContext, callback, renderLevel;
+            var App, context, ModernRender, ModernHydrate, _window__SSR_DATA, _window, hydrateContext, ssrContext, _ssrContext_request, initialPathname, currentPathname, errorMsg, callback, renderLevel;
             function stringSSRHydrate() {
               if (renderLevel === RenderLevel.CLIENT_RENDER || renderLevel === RenderLevel.SERVER_PREFETCH) {
                 ModernRender(/* @__PURE__ */ _jsx(App, {
@@ -85,6 +85,14 @@ var ssr = function(config) {
                 },
                 _hydration: true
               });
+              ssrContext = hydrateContext.ssrContext;
+              _ssrContext_request = ssrContext.request, initialPathname = _ssrContext_request.pathname;
+              currentPathname = window.location.pathname;
+              if (initialPathname !== currentPathname) {
+                errorMsg = "The initial URL ".concat(initialPathname, " and the URL ").concat(currentPathname, " to be hydrated do not match, reload.");
+                console.error(errorMsg);
+                window.location.reload();
+              }
               callback = function() {
                 delete hydrateContext._hydration;
               };

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

@@ -76,6 +76,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, _object_spread({}, newProps));
         }
       }

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

@@ -0,0 +1,14 @@
+var HTML_PLACEHOLDER = "<!--<?- html ?>-->";
+var SSR_DATA_PLACEHOLDER = "<!--<?- SSRDataScript ?>-->";
+var CHUNK_JS_PLACEHOLDER = "<!--<?- chunksMap.js ?>-->";
+var CHUNK_CSS_PLACEHOLDER = "<!--<?- chunksMap.css ?>-->";
+var SSR_DATA_JSON_ID = "__MODERN_SSR_DATA__";
+var 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/ssr/serverRender/helmet.js

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

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

@@ -1,7 +1,7 @@
 import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import { isReact18 } from "../utils";
-import { CSS_CHUNKS_PLACEHOLDER } from "./utils";
+import { CHUNK_CSS_PLACEHOLDER } from "./constants";
 function serverRender(options) {
   return _serverRender.apply(this, arguments);
 }
@@ -13,7 +13,7 @@ function _serverRender() {
         case 0:
           if ((_options_context_ssrContext = options.context.ssrContext) === null || _options_context_ssrContext === void 0 ? void 0 : _options_context_ssrContext.template) {
             ;
-            options.context.ssrContext.template = (_options_context_ssrContext1 = options.context.ssrContext) === null || _options_context_ssrContext1 === void 0 ? void 0 : _options_context_ssrContext1.template.replace("</head>", "".concat(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>", "".concat(CHUNK_CSS_PLACEHOLDER, "</head>"));
           }
           if (!(isReact18() && options.config.mode === "stream"))
             return [

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

@@ -1,6 +1,7 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 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) {
   var callbacks = [
@@ -9,7 +10,7 @@ function buildShellAfterTemplate(afterAppTemplate, options) {
   return buildTemplate(afterAppTemplate, callbacks);
   function injectSSRDataScript(template) {
     var ssrDataScript = buildSSRDataScript();
-    return template.replace("<!--<?- SSRDataScript ?>-->", ssrDataScript);
+    return safeReplace(template, SSR_DATA_PLACEHOLDER, ssrDataScript);
     function buildSSRDataScript() {
       var _options_context = options.context, ssrContext = _options_context.ssrContext, initialData = _options_context.initialData, __i18nData__ = _options_context.__i18nData__, renderLevel = options.renderLevel;
       var request = ssrContext.request, enableUnsafeCtx = ssrContext.enableUnsafeCtx, nonce = ssrContext.nonce, tracker = ssrContext.tracker;

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

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

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

@@ -1,11 +1,56 @@
+import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
+import { _ as _instanceof } from "@swc/helpers/_/_instanceof";
 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 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) {
+var readAsset = function() {
+  var _ref = _async_to_generator(function(chunk) {
+    var fs, path, filepath;
+    return _ts_generator(this, function(_state) {
+      switch (_state.label) {
+        case 0:
+          return [
+            4,
+            import("fs/promises")
+          ];
+        case 1:
+          fs = _state.sent();
+          return [
+            4,
+            import("path")
+          ];
+        case 2:
+          path = _state.sent();
+          filepath = path.join(__dirname, chunk);
+          return [
+            2,
+            fs.readFile(filepath, "utf-8")
+          ];
+      }
+    });
+  });
+  return function readAsset2(chunk) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var checkIsInline = function(chunk, enableInline) {
+  if (process.env.NODE_ENV === "production") {
+    if (_instanceof(enableInline, RegExp)) {
+      return enableInline.test(chunk);
+    } else {
+      return Boolean(enableInline);
+    }
+  } else {
+    return false;
+  }
+};
+function getHeadTemplate(beforeEntryTemplate, context, pluginConfig) {
   var callbacks = [
     function(headTemplate2) {
       var helmetData = ReactHelmet.renderStatic();
@@ -20,42 +65,133 @@ function getHeadTemplate(beforeEntryTemplate, context) {
   }
   return buildTemplate(headTemplate, callbacks);
   function injectCss(headTemplate2) {
-    return headTemplate2.replace(CSS_CHUNKS_PLACEHOLDER, getCssChunks());
-    function getCssChunks() {
-      var routeManifest = context.routeManifest, routerContext = context.routerContext, routes = context.routes;
-      if (!routeManifest || !routerContext || !routes) {
-        return "";
+    return _injectCss.apply(this, arguments);
+  }
+  function _injectCss() {
+    _injectCss = _async_to_generator(function(headTemplate2) {
+      var css;
+      function getCssChunks() {
+        return _getCssChunks.apply(this, arguments);
       }
-      var routeAssets = routeManifest.routeAssets;
-      var cssChunks = [];
-      var matches = matchRoutes(routes, routerContext.location, routerContext.basename);
-      matches === null || matches === void 0 ? void 0 : matches.forEach(function(match, index) {
-        if (!index) {
-          return;
-        }
-        var routeId = match.route.id;
-        if (routeId) {
-          var routeManifest2 = routeAssets[routeId];
-          if (routeManifest2) {
-            var _cssChunks;
-            var _routeManifest_referenceCssAssets = routeManifest2.referenceCssAssets, referenceCssAssets = _routeManifest_referenceCssAssets === void 0 ? [] : _routeManifest_referenceCssAssets;
-            var _cssChunks1 = referenceCssAssets.filter(function(asset) {
-              return (asset === null || asset === void 0 ? void 0 : asset.endsWith(".css")) && !headTemplate2.includes(asset);
-            });
-            (_cssChunks = cssChunks).push.apply(_cssChunks, _to_consumable_array(_cssChunks1));
-          }
+      function _getCssChunks() {
+        _getCssChunks = _async_to_generator(function() {
+          var routeManifest, routerContext, routes, routeAssets, cssChunks, matches, enableInlineStyles, styles;
+          return _ts_generator(this, function(_state) {
+            switch (_state.label) {
+              case 0:
+                routeManifest = context.routeManifest, routerContext = context.routerContext, routes = context.routes;
+                if (!routeManifest || !routerContext || !routes) {
+                  return [
+                    2,
+                    ""
+                  ];
+                }
+                routeAssets = routeManifest.routeAssets;
+                cssChunks = [];
+                matches = matchRoutes(routes, routerContext.location, routerContext.basename);
+                matches === null || matches === void 0 ? void 0 : matches.forEach(function(match, index) {
+                  if (!index) {
+                    return;
+                  }
+                  var routeId = match.route.id;
+                  if (routeId) {
+                    var routeManifest2 = routeAssets[routeId];
+                    if (routeManifest2) {
+                      var _cssChunks;
+                      var _routeManifest_referenceCssAssets = routeManifest2.referenceCssAssets, referenceCssAssets = _routeManifest_referenceCssAssets === void 0 ? [] : _routeManifest_referenceCssAssets;
+                      var _cssChunks1 = referenceCssAssets.filter(function(asset) {
+                        return (asset === null || asset === void 0 ? void 0 : asset.endsWith(".css")) && !headTemplate2.includes(asset);
+                      });
+                      (_cssChunks = cssChunks).push.apply(_cssChunks, _to_consumable_array(_cssChunks1));
+                    }
+                  }
+                });
+                enableInlineStyles = pluginConfig.enableInlineStyles;
+                return [
+                  4,
+                  Promise.all(cssChunks.map(function() {
+                    var _ref2 = _async_to_generator(function(chunk) {
+                      var link;
+                      return _ts_generator(this, function(_state2) {
+                        link = '<link href="'.concat(chunk, '" rel="stylesheet" />');
+                        if (checkIsNode() && checkIsInline(chunk, enableInlineStyles)) {
+                          return [
+                            2,
+                            readAsset(chunk).then(function(content) {
+                              return "<style>".concat(content, "</style>");
+                            }).catch(function(_) {
+                              return link;
+                            })
+                          ];
+                        } else {
+                          return [
+                            2,
+                            link
+                          ];
+                        }
+                        return [
+                          2
+                        ];
+                      });
+                    });
+                    return function(chunk) {
+                      return _ref2.apply(this, arguments);
+                    };
+                  }()))
+                ];
+              case 1:
+                styles = _state.sent();
+                return [
+                  2,
+                  "".concat(styles.join(""))
+                ];
+            }
+          });
+        });
+        return _getCssChunks.apply(this, arguments);
+      }
+      return _ts_generator(this, function(_state) {
+        switch (_state.label) {
+          case 0:
+            return [
+              4,
+              getCssChunks()
+            ];
+          case 1:
+            css = _state.sent();
+            return [
+              2,
+              safeReplace(headTemplate2, CHUNK_CSS_PLACEHOLDER, css)
+            ];
         }
       });
-      var styleLinks = cssChunks.map(function(chunk) {
-        return '<link href="'.concat(chunk, '" rel="stylesheet" />');
-      });
-      return "".concat(styleLinks.join(""));
-    }
+    });
+    return _injectCss.apply(this, arguments);
   }
 }
-function buildShellBeforeTemplate(beforeAppTemplate, context) {
-  var headTemplate = getHeadTemplate(beforeAppTemplate, context);
-  return beforeAppTemplate.replace(HEAD_REG_EXP, headTemplate);
+function buildShellBeforeTemplate(beforeAppTemplate, context, pluginConfig) {
+  return _buildShellBeforeTemplate.apply(this, arguments);
+}
+function _buildShellBeforeTemplate() {
+  _buildShellBeforeTemplate = _async_to_generator(function(beforeAppTemplate, context, pluginConfig) {
+    var headTemplate;
+    return _ts_generator(this, function(_state) {
+      switch (_state.label) {
+        case 0:
+          return [
+            4,
+            getHeadTemplate(beforeAppTemplate, context, pluginConfig)
+          ];
+        case 1:
+          headTemplate = _state.sent();
+          return [
+            2,
+            beforeAppTemplate.replace(HEAD_REG_EXP, headTemplate)
+          ];
+      }
+    });
+  });
+  return _buildShellBeforeTemplate.apply(this, arguments);
 }
 export {
   buildShellBeforeTemplate

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

@@ -3,11 +3,10 @@ import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import { createElement } from "react";
 import { run } from "@modern-js/runtime-utils/node";
 import { time } from "@modern-js/runtime-utils/time";
-import { PreRender } from "../../react/prerender";
 import { SSRErrors, SSRTimings } from "../tracker";
 import renderToPipe from "./renderToPipe";
 var render = function(param) {
-  var App = param.App, context = param.context;
+  var App = param.App, context = param.context, config = param.config;
   var ssrContext = context.ssrContext;
   if (!ssrContext) {
     throw new Error('The "ssrContext" must not be undefined, but received undefined');
@@ -22,12 +21,8 @@ var render = function(param) {
         })
       });
       tracker = ssrContext.tracker;
-      pipe = renderToPipe(rootElement, context, {
+      pipe = renderToPipe(rootElement, context, config, {
         onShellReady: function onShellReady() {
-          var cacheConfig = PreRender.config();
-          if (cacheConfig) {
-            ssrContext.cacheConfig = cacheConfig;
-          }
           var cost = end();
           tracker.trackTiming(SSRTimings.RENDER_SHELL, cost);
         },

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

@@ -10,7 +10,7 @@ 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 ssrContext = context.ssrContext;
   var chunkVec = [];
@@ -24,41 +24,45 @@ function renderToPipe(rootElement, context, options) {
       var pipe = renderToPipeableStream(rootElement, _object_spread_props(_object_spread({}, options), {
         nonce: ssrContext === null || ssrContext === void 0 ? void 0 : ssrContext.nonce,
         onShellReady: function onShellReady() {
-          var _options_onShellReady;
-          var _getTemplates = getTemplates(context, RenderLevel.SERVER_RENDER), shellAfter = _getTemplates.shellAfter, shellBefore = _getTemplates.shellBefore;
-          options === null || options === void 0 ? void 0 : (_options_onShellReady = options.onShellReady) === null || _options_onShellReady === void 0 ? void 0 : _options_onShellReady.call(options);
-          var injectableTransform = new Transform({
-            transform: function transform(chunk, _encoding, callback) {
-              try {
-                if (shellChunkStatus !== 1) {
-                  chunkVec.push(chunk.toString());
-                  var concatedChunk = chunkVec.join("");
-                  if (concatedChunk.endsWith(ESCAPED_SHELL_STREAM_END_MARK)) {
-                    concatedChunk = concatedChunk.replace(ESCAPED_SHELL_STREAM_END_MARK, "");
-                    shellChunkStatus = 1;
-                    this.push("".concat(shellBefore).concat(concatedChunk).concat(shellAfter));
+          getTemplates(context, RenderLevel.SERVER_RENDER, pluginConfig).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 injectableTransform = new Transform({
+              transform: function transform(chunk, _encoding, callback) {
+                try {
+                  if (shellChunkStatus !== 1) {
+                    chunkVec.push(chunk.toString());
+                    var concatedChunk = chunkVec.join("");
+                    if (concatedChunk.endsWith(ESCAPED_SHELL_STREAM_END_MARK)) {
+                      concatedChunk = concatedChunk.replace(ESCAPED_SHELL_STREAM_END_MARK, "");
+                      shellChunkStatus = 1;
+                      this.push("".concat(shellBefore).concat(concatedChunk).concat(shellAfter));
+                    }
+                  } else {
+                    this.push(chunk);
+                  }
+                  callback();
+                } catch (e) {
+                  if (_instanceof(e, Error)) {
+                    callback(e);
+                  } else {
+                    callback(new Error("Received unkown error when streaming"));
                   }
-                } else {
-                  this.push(chunk);
-                }
-                callback();
-              } catch (e) {
-                if (_instanceof(e, Error)) {
-                  callback(e);
-                } else {
-                  callback(new Error("Received unkown error when streaming"));
                 }
               }
-            }
+            });
+            resolve(pipe(injectableTransform).pipe(stream));
           });
-          resolve(pipe(injectableTransform).pipe(stream));
         },
         onShellError: function onShellError(error) {
-          var _options_onShellError;
-          var _getTemplates = getTemplates(context, RenderLevel.CLIENT_RENDER), shellAfter = _getTemplates.shellAfter, shellBefore = _getTemplates.shellBefore;
-          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);
+          getTemplates(context, RenderLevel.CLIENT_RENDER, 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);
+          });
         }
       })).pipe;
     });