@modern-js/runtime 2.32.1 → 2.33.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @modern-js/runtime
 
+## 2.33.0
+
+### Minor Changes
+
+- 2bcff4f: feat(plugin-runtime): support ssr html modifiers
+  feat(plugin-runtime): 支持 ssr html 修改者
+
+### Patch Changes
+
+- 6ea89ab: fix: html has placeholder when not set partials
+  fix: html 在没有设置 partials 的时候,会多出占位符
+- ae35c65: fix: ssr htmlModifiers
+  fix: ssr htmlModifiers 赋值问题
+- 44da57b: refactor: runtime server ssr
+  refactor: 重构 runtime server ssr
+- Updated dependencies [fd82137]
+- Updated dependencies [bc1f8da]
+  - @modern-js/utils@2.33.0
+  - @modern-js/plugin@2.33.0
+  - @modern-js/types@2.33.0
+
 ## 2.32.1
 
 ### Patch Changes

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

@@ -138,12 +138,17 @@ const documentPlugin = () => ({
           htmlWebpackPlugin.tags.headTags.filter((item) => item.tagName === "script").join(""),
           htmlWebpackPlugin.tags.bodyTags.toString()
         ].join("");
+        const partialsContent = {
+          partialsTop: "",
+          partialsHead: "",
+          partialsBody: ""
+        };
         if ((_partialsByEntrypoint = partialsByEntrypoint) === null || _partialsByEntrypoint === void 0 ? void 0 : _partialsByEntrypoint[entryName]) {
-          const partialsTop = partialsByEntrypoint[entryName].top.join("\n");
-          const partialsHead = partialsByEntrypoint[entryName].head.join("\n");
-          const partialsBody = partialsByEntrypoint[entryName].body.join("\n");
-          html = html.replace(_constants.TOP_PARTICALS_SEPARATOR, partialsTop).replace(_constants.HEAD_PARTICALS_SEPARATOR, partialsHead).replace(_constants.BODY_PARTICALS_SEPARATOR, partialsBody);
+          partialsContent.partialsTop = partialsByEntrypoint[entryName].top.join("\n");
+          partialsContent.partialsHead = partialsByEntrypoint[entryName].head.join("\n");
+          partialsContent.partialsBody = partialsByEntrypoint[entryName].body.join("\n");
         }
+        html = html.replace(_constants.TOP_PARTICALS_SEPARATOR, partialsContent.partialsTop).replace(_constants.HEAD_PARTICALS_SEPARATOR, partialsContent.partialsHead).replace(_constants.BODY_PARTICALS_SEPARATOR, partialsContent.partialsBody);
         const links = [
           htmlWebpackPlugin.tags.headTags.filter((item) => item.tagName === "link").join("")
         ].join("");

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

@@ -38,6 +38,9 @@ const ssr = (config = {}) => ({
         const { request } = context.ssrContext;
         context.ssrContext.request = (0, _utils.formatServer)(request);
         context.ssrContext.mode = config.mode;
+        if (!context.ssrContext.htmlModifiers) {
+          context.ssrContext.htmlModifiers = [];
+        }
         return next({
           context
         });

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

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name]
+    });
+}
+_export(exports, {
+  buildHtml: function() {
+    return buildHtml;
+  },
+  createReplaceHtml: function() {
+    return createReplaceHtml;
+  },
+  createReplaceSSRDataScript: function() {
+    return createReplaceSSRDataScript;
+  },
+  createReplaceChunkJs: function() {
+    return createReplaceChunkJs;
+  },
+  createReplaceChunkCss: function() {
+    return createReplaceChunkCss;
+  }
+});
+function buildHtml(template, callbacks) {
+  return callbacks.reduce((tmp, cb) => cb(tmp), template);
+}
+function createReplaceHtml(html) {
+  const HTML_REG = /<!--<\?-\s*html\s*\?>-->/;
+  return (template) => template.replace(HTML_REG, html);
+}
+function createReplaceSSRDataScript(data) {
+  const SSR_DATA_REG = /<!--<\?-\s*SSRDataScript\s*\?>-->/;
+  return (template) => template.replace(SSR_DATA_REG, data);
+}
+function createReplaceChunkJs(js) {
+  const CHUNK_JS_REG = /<!--<\?-\s*chunksMap\.js\s*\?>-->/;
+  return (template) => template.replace(CHUNK_JS_REG, js);
+}
+function createReplaceChunkCss(css) {
+  const CHUNK_CSS_REG = /<!--<\?-\s*chunksMap\.css\s*\?>-->/;
+  return (template) => template.replace(CHUNK_CSS_REG, css);
+}

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

@@ -10,9 +10,7 @@ Object.defineProperty(exports, "default", {
 });
 const _define_property = require("@swc/helpers/_/_define_property");
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /* @__PURE__ */ _interop_require_default._(require("react"));
-const _server = /* @__PURE__ */ _interop_require_default._(require("react-dom/server"));
 const _runtimenode = require("@modern-js/utils/runtime-node");
 const _reacthelmet = /* @__PURE__ */ _interop_require_default._(require("react-helmet"));
 const _time = require("@modern-js/utils/universal/time");
@@ -22,10 +20,10 @@ const _types = require("../types");
 const _prefetch = /* @__PURE__ */ _interop_require_default._(require("../../prefetch"));
 const _utils1 = require("../utils");
 const _tracker = require("../tracker");
-const _template = require("./template");
-const _reduce = require("./reduce");
-const _loadable = /* @__PURE__ */ _interop_require_wildcard._(require("./loadable"));
-const _styledComponent = /* @__PURE__ */ _interop_require_wildcard._(require("./styledComponent"));
+const _loadable = require("./loadable");
+const _render = require("./render");
+const _styledComponent = require("./styledComponent");
+const _buildHtml = require("./buildHtml");
 const buildTemplateData = (context, data, renderLevel, tracker) => {
   const { request, enableUnsafeCtx } = context;
   const unsafeContext = {
@@ -71,16 +69,15 @@ class Entry {
       loaderData: routerContext.loaderData,
       errors: (0, _utils.serializeErrors)(routerContext.errors)
     } : void 0;
-    let html = "";
     const templateData = buildTemplateData(ssrContext, prefetchData, this.result.renderLevel, this.tracker);
-    const SSRData = this.getSSRDataScript(templateData, routerData);
-    for (const fragment of this.fragments) {
-      if (fragment.isVariable && fragment.content === "SSRDataScript") {
-        html += fragment.getValue(SSRData);
-      } else {
-        html += fragment.getValue(this.result);
-      }
-    }
+    const ssrDataScripts = this.getSSRDataScript(templateData, routerData);
+    const html = (0, _buildHtml.buildHtml)(this.template, [
+      (0, _buildHtml.createReplaceChunkCss)(this.result.chunksMap.css),
+      (0, _buildHtml.createReplaceChunkJs)(this.result.chunksMap.js),
+      (0, _buildHtml.createReplaceHtml)(this.result.html || ""),
+      (0, _buildHtml.createReplaceSSRDataScript)(ssrDataScripts),
+      ...this.htmlModifiers
+    ]);
     const helmetData = _reacthelmet.default.renderStatic();
     return helmetData ? (0, _helmet.default)(html, helmetData) : html;
   }
@@ -108,20 +105,14 @@ class Entry {
           ssr: true
         })
       });
-      const renderContext = {
+      html = (0, _render.createRender)(App).addCollector((0, _styledComponent.createStyledCollector)(this.result)).addCollector((0, _loadable.createLoadableCollector)({
         stats: ssrContext.loadableStats,
-        host: this.host,
         result: this.result,
         entryName: this.entryName,
         config: this.pluginConfig,
         nonce: this.nonce,
         template: this.template
-      };
-      html = (0, _reduce.reduce)(App, renderContext, [
-        _styledComponent.toHtml,
-        _loadable.toHtml,
-        (jsx) => _server.default.renderToString(jsx)
-      ]);
+      })).finish();
       const cost = end();
       this.tracker.trackTiming(_tracker.SSRTimings.SSR_RENDER_HTML, cost);
       this.result.renderLevel = _types.RenderLevel.SERVER_RENDER;
@@ -143,9 +134,7 @@ class Entry {
 <script${attrsStr}>window._ROUTER_DATA = ${serializedRouterData}</script>` : `
 <script type="application/json" id="${_utils1.ROUTER_DATA_JSON_ID}">${serializedRouterData}</script>`;
     }
-    return {
-      SSRDataScript: ssrDataScripts
-    };
+    return ssrDataScripts;
   }
   constructor(options) {
     _define_property._(this, "entryName", void 0);
@@ -154,20 +143,18 @@ class Entry {
     _define_property._(this, "tracker", void 0);
     _define_property._(this, "template", void 0);
     _define_property._(this, "App", void 0);
-    _define_property._(this, "fragments", void 0);
     _define_property._(this, "pluginConfig", void 0);
-    _define_property._(this, "host", void 0);
+    _define_property._(this, "htmlModifiers", void 0);
     _define_property._(this, "nonce", void 0);
     const { ctx, config } = options;
-    const { entryName, template, request: { host }, nonce } = ctx;
-    this.fragments = (0, _template.toFragments)(template, entryName);
+    const { entryName, template, nonce } = ctx;
     this.template = template;
     this.entryName = entryName;
-    this.host = host;
     this.App = options.App;
     this.pluginConfig = config;
     this.tracker = (0, _tracker.createSSRTracker)(ctx);
     this.metrics = ctx.metrics;
+    this.htmlModifiers = ctx.htmlModifiers;
     this.nonce = nonce;
     this.result = {
       renderLevel: _types.RenderLevel.CLIENT_RENDER,

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

@@ -2,12 +2,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "toHtml", {
+Object.defineProperty(exports, "createLoadableCollector", {
   enumerable: true,
   get: function() {
-    return toHtml;
+    return createLoadableCollector;
   }
 });
+const _define_property = require("@swc/helpers/_/_define_property");
 const _server = require("@loadable/server");
 const _utils = require("../utils");
 const extname = (uri) => {
@@ -17,47 +18,63 @@ const extname = (uri) => {
   }
   return `.${(_uri = uri) === null || _uri === void 0 ? void 0 : _uri.split(".").pop()}` || "";
 };
-const toHtml = (jsx, renderer, next) => {
-  const { stats, result: { chunksMap }, config = {}, nonce } = renderer;
-  if (!stats || chunksMap.js) {
-    return next(jsx);
-  }
-  const extractor = new _server.ChunkExtractor({
-    stats,
-    entrypoints: [
-      renderer.entryName
-    ]
-  });
-  const html = next(extractor.collectChunks(jsx));
-  const chunks = extractor.getChunkAssets(extractor.chunks);
-  chunksMap.js = (chunksMap.js || "") + (0, _utils.getLoadableScripts)(extractor);
-  for (const v of chunks) {
-    const fileType = extname(v.url).slice(1);
-    const attributes = {};
-    const { crossorigin, scriptLoading = "defer" } = config;
-    if (crossorigin) {
-      attributes.crossorigin = crossorigin === true ? "anonymous" : crossorigin;
+class LoadableCollector {
+  collect(comopnent) {
+    const { stats, entryName } = this.options;
+    if (!stats) {
+      return comopnent;
     }
-    switch (scriptLoading) {
-      case "defer":
-        attributes.defer = true;
-        break;
-      case "module":
-        attributes.type = "module";
-        break;
-      default:
+    this.extractor = new _server.ChunkExtractor({
+      stats,
+      entrypoints: [
+        entryName
+      ]
+    });
+    return this.extractor.collectChunks(comopnent);
+  }
+  effect() {
+    if (!this.extractor) {
+      return;
     }
-    if (fileType === "js") {
-      const jsChunkReg = new RegExp(`<script .*src="${v.url}".*>`);
-      if (!jsChunkReg.test(renderer.template)) {
-        attributes.nonce = nonce;
+    const { result: { chunksMap }, config, template, nonce } = this.options;
+    const { extractor } = this;
+    const chunks = extractor.getChunkAssets(extractor.chunks);
+    chunksMap.js = (chunksMap.js || "") + (0, _utils.getLoadableScripts)(extractor);
+    for (const v of chunks) {
+      const fileType = extname(v.url).slice(1);
+      const attributes = {};
+      const { crossorigin, scriptLoading = "defer" } = config;
+      if (crossorigin) {
+        attributes.crossorigin = crossorigin === true ? "anonymous" : crossorigin;
+      }
+      switch (scriptLoading) {
+        case "defer":
+          attributes.defer = true;
+          break;
+        case "module":
+          attributes.type = "module";
+          break;
+        default:
+      }
+      if (fileType === "js") {
+        const jsChunkReg = new RegExp(`<script .*src="${v.url}".*>`);
+        if (!jsChunkReg.test(template)) {
+          attributes.nonce = nonce;
+          const attrsStr = (0, _utils.attributesToString)(attributes);
+          chunksMap[fileType] += `<script${attrsStr} src="${v.url}"></script>`;
+        }
+      } else if (fileType === "css") {
         const attrsStr = (0, _utils.attributesToString)(attributes);
-        chunksMap[fileType] += `<script${attrsStr} src="${v.url}"></script>`;
+        chunksMap[fileType] += `<link${attrsStr} href="${v.url}" rel="stylesheet" />`;
       }
-    } else if (fileType === "css") {
-      const attrsStr = (0, _utils.attributesToString)(attributes);
-      chunksMap[fileType] += `<link${attrsStr} href="${v.url}" rel="stylesheet" />`;
     }
   }
-  return html;
-};
+  constructor(options) {
+    _define_property._(this, "options", void 0);
+    _define_property._(this, "extractor", void 0);
+    this.options = options;
+  }
+}
+function createLoadableCollector(options) {
+  return new LoadableCollector(options);
+}

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "createRender", {
+  enumerable: true,
+  get: function() {
+    return createRender;
+  }
+});
+const _define_property = require("@swc/helpers/_/_define_property");
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _server = /* @__PURE__ */ _interop_require_default._(require("react-dom/server"));
+class Render {
+  addCollector(collector) {
+    this.collectors.push(collector);
+    return this;
+  }
+  finish() {
+    const App = this.collectors.reduce((pre, collector) => collector.collect(pre), this.App);
+    const html = _server.default.renderToString(App);
+    this.collectors.forEach((component) => {
+      component.effect();
+    });
+    return html;
+  }
+  constructor(App) {
+    _define_property._(this, "App", void 0);
+    _define_property._(this, "collectors", []);
+    this.App = App;
+  }
+}
+function createRender(App) {
+  return new Render(App);
+}

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

@@ -2,17 +2,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "toHtml", {
+Object.defineProperty(exports, "createStyledCollector", {
   enumerable: true,
   get: function() {
-    return toHtml;
+    return createStyledCollector;
   }
 });
+const _define_property = require("@swc/helpers/_/_define_property");
 const _styledcomponents = require("styled-components");
-const toHtml = (jsx, renderer, next) => {
-  const sheet = new _styledcomponents.ServerStyleSheet();
-  const html = next(sheet.collectStyles(jsx));
-  const css = sheet.getStyleTags();
-  renderer.result.chunksMap.css += css;
-  return html;
-};
+class StyledCollector {
+  collect(comopnent) {
+    return this.sheet.collectStyles(comopnent);
+  }
+  effect() {
+    const css = this.sheet.getStyleTags();
+    this.result.chunksMap.css += css;
+  }
+  constructor(result) {
+    _define_property._(this, "sheet", new _styledcomponents.ServerStyleSheet());
+    _define_property._(this, "result", void 0);
+    this.result = result;
+  }
+}
+function createStyledCollector(result) {
+  return new StyledCollector(result);
+}

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

@@ -57,7 +57,7 @@ export var documentPlugin = function() {
             }
             return function() {
               var _ref2 = _async_to_generator(function(param) {
-                var htmlWebpackPlugin, _tsConfig, _partialsByEntrypoint, config, documentParams, tempTsConfigFile, userTsConfigFilePath, tsConfig, err, htmlOutputFile, Document, HTMLElement, html, partialsByEntrypoint, scripts, partialsTop, partialsHead, partialsBody, links, metas, nonce, nonceAttr, finalHtml;
+                var htmlWebpackPlugin, _tsConfig, _partialsByEntrypoint, config, documentParams, tempTsConfigFile, userTsConfigFilePath, tsConfig, err, htmlOutputFile, Document, HTMLElement, html, partialsByEntrypoint, scripts, partialsContent, links, metas, nonce, nonceAttr, finalHtml;
                 return _ts_generator(this, function(_state2) {
                   switch (_state2.label) {
                     case 0:
@@ -163,12 +163,17 @@ export var documentPlugin = function() {
                         }).join(""),
                         htmlWebpackPlugin.tags.bodyTags.toString()
                       ].join("");
+                      partialsContent = {
+                        partialsTop: "",
+                        partialsHead: "",
+                        partialsBody: ""
+                      };
                       if ((_partialsByEntrypoint = partialsByEntrypoint) === null || _partialsByEntrypoint === void 0 ? void 0 : _partialsByEntrypoint[entryName]) {
-                        partialsTop = partialsByEntrypoint[entryName].top.join("\n");
-                        partialsHead = partialsByEntrypoint[entryName].head.join("\n");
-                        partialsBody = partialsByEntrypoint[entryName].body.join("\n");
-                        html = html.replace(TOP_PARTICALS_SEPARATOR, partialsTop).replace(HEAD_PARTICALS_SEPARATOR, partialsHead).replace(BODY_PARTICALS_SEPARATOR, partialsBody);
+                        partialsContent.partialsTop = partialsByEntrypoint[entryName].top.join("\n");
+                        partialsContent.partialsHead = partialsByEntrypoint[entryName].head.join("\n");
+                        partialsContent.partialsBody = partialsByEntrypoint[entryName].body.join("\n");
                       }
+                      html = html.replace(TOP_PARTICALS_SEPARATOR, partialsContent.partialsTop).replace(HEAD_PARTICALS_SEPARATOR, partialsContent.partialsHead).replace(BODY_PARTICALS_SEPARATOR, partialsContent.partialsBody);
                       links = [
                         htmlWebpackPlugin.tags.headTags.filter(function(item) {
                           return item.tagName === "link";

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

@@ -43,6 +43,9 @@ export var ssr = function() {
           var request = context.ssrContext.request;
           context.ssrContext.request = formatServer(request);
           context.ssrContext.mode = config.mode;
+          if (!context.ssrContext.htmlModifiers) {
+            context.ssrContext.htmlModifiers = [];
+          }
           return next({
             context: context
           });

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

@@ -0,0 +1,29 @@
+export function buildHtml(template, callbacks) {
+  return callbacks.reduce(function(tmp, cb) {
+    return cb(tmp);
+  }, template);
+}
+export function createReplaceHtml(html) {
+  var HTML_REG = /<!--<\?-\s*html\s*\?>-->/;
+  return function(template) {
+    return template.replace(HTML_REG, html);
+  };
+}
+export function createReplaceSSRDataScript(data) {
+  var SSR_DATA_REG = /<!--<\?-\s*SSRDataScript\s*\?>-->/;
+  return function(template) {
+    return template.replace(SSR_DATA_REG, data);
+  };
+}
+export function createReplaceChunkJs(js) {
+  var CHUNK_JS_REG = /<!--<\?-\s*chunksMap\.js\s*\?>-->/;
+  return function(template) {
+    return template.replace(CHUNK_JS_REG, js);
+  };
+}
+export function createReplaceChunkCss(css) {
+  var CHUNK_CSS_REG = /<!--<\?-\s*chunksMap\.css\s*\?>-->/;
+  return function(template) {
+    return template.replace(CHUNK_CSS_REG, css);
+  };
+}

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

@@ -3,9 +3,9 @@ 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 _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import React from "react";
-import ReactDomServer from "react-dom/server";
 import { serializeJson } from "@modern-js/utils/runtime-node";
 import ReactHelmet from "react-helmet";
 import { time } from "@modern-js/utils/universal/time";
@@ -15,10 +15,10 @@ import { RenderLevel } from "../types";
 import prefetch from "../../prefetch";
 import { ROUTER_DATA_JSON_ID, SSR_DATA_JSON_ID, attributesToString } from "../utils";
 import { SSRErrors, SSRTimings, createSSRTracker } from "../tracker";
-import { toFragments } from "./template";
-import { reduce } from "./reduce";
-import * as loadableRenderer from "./loadable";
-import * as styledComponentRenderer from "./styledComponent";
+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 = {
@@ -51,20 +51,18 @@ var Entry = /* @__PURE__ */ function() {
     _define_property(this, "tracker", void 0);
     _define_property(this, "template", void 0);
     _define_property(this, "App", void 0);
-    _define_property(this, "fragments", void 0);
     _define_property(this, "pluginConfig", void 0);
-    _define_property(this, "host", void 0);
+    _define_property(this, "htmlModifiers", void 0);
     _define_property(this, "nonce", void 0);
     var ctx = options.ctx, config = options.config;
-    var entryName = ctx.entryName, template = ctx.template, host = ctx.request.host, nonce = ctx.nonce;
-    this.fragments = toFragments(template, entryName);
+    var entryName = ctx.entryName, template = ctx.template, nonce = ctx.nonce;
     this.template = template;
     this.entryName = entryName;
-    this.host = host;
     this.App = options.App;
     this.pluginConfig = config;
     this.tracker = createSSRTracker(ctx);
     this.metrics = ctx.metrics;
+    this.htmlModifiers = ctx.htmlModifiers;
     this.nonce = nonce;
     this.result = {
       renderLevel: RenderLevel.CLIENT_RENDER,
@@ -81,7 +79,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, html, templateData, SSRData, _iteratorNormalCompletion, _didIteratorError, _iteratorError, _iterator, _step, fragment, 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:
@@ -118,33 +116,14 @@ var Entry = /* @__PURE__ */ function() {
                   loaderData: routerContext.loaderData,
                   errors: serializeErrors(routerContext.errors)
                 } : void 0;
-                html = "";
                 templateData = buildTemplateData(ssrContext, prefetchData, _this.result.renderLevel, _this.tracker);
-                SSRData = _this.getSSRDataScript(templateData, routerData);
-                _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
-                try {
-                  for (_iterator = _this.fragments[Symbol.iterator](); !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-                    fragment = _step.value;
-                    if (fragment.isVariable && fragment.content === "SSRDataScript") {
-                      html += fragment.getValue(SSRData);
-                    } else {
-                      html += fragment.getValue(_this.result);
-                    }
-                  }
-                } catch (err) {
-                  _didIteratorError = true;
-                  _iteratorError = err;
-                } finally {
-                  try {
-                    if (!_iteratorNormalCompletion && _iterator.return != null) {
-                      _iterator.return();
-                    }
-                  } finally {
-                    if (_didIteratorError) {
-                      throw _iteratorError;
-                    }
-                  }
-                }
+                ssrDataScripts = _this.getSSRDataScript(templateData, routerData);
+                html = buildHtml(_this.template, [
+                  createReplaceChunkCss(_this.result.chunksMap.css),
+                  createReplaceChunkJs(_this.result.chunksMap.js),
+                  createReplaceHtml(_this.result.html || ""),
+                  createReplaceSSRDataScript(ssrDataScripts)
+                ].concat(_to_consumable_array(_this.htmlModifiers)));
                 helmetData = ReactHelmet.renderStatic();
                 return [
                   2,
@@ -216,22 +195,14 @@ var Entry = /* @__PURE__ */ function() {
               ssr: true
             })
           });
-          var renderContext = {
+          html = createRender(App).addCollector(createStyledCollector(this.result)).addCollector(createLoadableCollector({
             stats: ssrContext.loadableStats,
-            host: this.host,
             result: this.result,
             entryName: this.entryName,
             config: this.pluginConfig,
             nonce: this.nonce,
             template: this.template
-          };
-          html = reduce(App, renderContext, [
-            styledComponentRenderer.toHtml,
-            loadableRenderer.toHtml,
-            function(jsx) {
-              return ReactDomServer.renderToString(jsx);
-            }
-          ]);
+          })).finish();
           var cost = end();
           this.tracker.trackTiming(SSRTimings.SSR_RENDER_HTML, cost);
           this.result.renderLevel = RenderLevel.SERVER_RENDER;
@@ -254,9 +225,7 @@ var Entry = /* @__PURE__ */ function() {
           var serializedRouterData = serializeJson(routerData);
           ssrDataScripts += useInlineScript ? "\n<script".concat(attrsStr, ">window._ROUTER_DATA = ").concat(serializedRouterData, "</script>") : '\n<script type="application/json" id="'.concat(ROUTER_DATA_JSON_ID, '">').concat(serializedRouterData, "</script>");
         }
-        return {
-          SSRDataScript: ssrDataScripts
-        };
+        return ssrDataScripts;
       }
     }
   ]);