@modern-js/runtime 2.55.0 → 2.56.1

package/dist/esm/core/server/stream/createReadableStream.js

@@ -1,7 +1,8 @@
+import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
 import { _ as _define_property } from "@swc/helpers/_/_define_property";
 import { _ as _instanceof } from "@swc/helpers/_/_instanceof";
+import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import { Transform } from "stream";
-import { renderToPipeableStream } from "react-dom/server";
 import { createReadableStreamFromReadable } from "@modern-js/runtime-utils/node";
 import { ServerStyleSheet } from "styled-components";
 import checkIsBot from "isbot";
@@ -9,84 +10,104 @@ import { ESCAPED_SHELL_STREAM_END_MARK } from "../../../common";
 import { RenderLevel } from "../../constants";
 import { getTemplates } from "./template";
 import { ShellChunkStatus, getReadableStreamFromString } from "./shared";
-var createReadableStreamFromElement = function(request, rootElement, options) {
-  var runtimeContext = options.runtimeContext, htmlTemplate = options.htmlTemplate, config = options.config, ssrConfig = options.ssrConfig;
-  var shellChunkStatus = ShellChunkStatus.START;
-  var renderLevel = RenderLevel.SERVER_RENDER;
-  var forceStream2String = Boolean(process.env.MODERN_JS_STREAM_TO_STRING);
-  var isbot = checkIsBot(request.headers.get("user-agent"));
-  var onReady = isbot || forceStream2String ? "onAllReady" : "onShellReady";
-  var sheet = new ServerStyleSheet();
-  var chunkVec = [];
-  var root = forceStream2String ? sheet.collectStyles(rootElement) : rootElement;
-  return new Promise(function(resolve) {
-    var _obj;
-    var pipe = renderToPipeableStream(root, (_obj = {
-      nonce: config.nonce
-    }, _define_property(_obj, onReady, function() {
-      var _options_onReady;
-      var styledComponentsStyleTags = forceStream2String ? sheet.getStyleTags() : "";
-      (_options_onReady = options[onReady]) === null || _options_onReady === void 0 ? void 0 : _options_onReady.call(options);
-      getTemplates(htmlTemplate, {
-        request,
-        ssrConfig,
-        renderLevel,
-        runtimeContext,
-        config,
-        styledComponentsStyleTags
-      }).then(function(param) {
-        var shellAfter = param.shellAfter, shellBefore = param.shellBefore;
-        var body = new Transform({
-          transform: function transform(chunk, _encoding, callback) {
-            try {
-              if (shellChunkStatus !== ShellChunkStatus.FINISH) {
-                chunkVec.push(chunk.toString());
-                var concatedChunk = chunkVec.join("");
-                if (concatedChunk.includes(ESCAPED_SHELL_STREAM_END_MARK)) {
-                  concatedChunk = concatedChunk.replace(ESCAPED_SHELL_STREAM_END_MARK, "");
-                  shellChunkStatus = ShellChunkStatus.FINISH;
-                  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"));
-              }
-            }
-          }
-        });
-        var stream = createReadableStreamFromReadable(body);
-        resolve(stream);
-        pipe(body);
-      });
-    }), _define_property(_obj, "onShellError", function onShellError(error) {
-      renderLevel = RenderLevel.CLIENT_RENDER;
-      getTemplates(htmlTemplate, {
-        request,
-        ssrConfig,
-        renderLevel,
-        runtimeContext,
-        config
-      }).then(function(param) {
-        var shellAfter = param.shellAfter, shellBefore = param.shellBefore;
-        var _options_onShellError;
-        var fallbackHtml = "".concat(shellBefore).concat(shellAfter);
-        var readableStream = getReadableStreamFromString(fallbackHtml);
-        resolve(readableStream);
-        options === null || options === void 0 ? void 0 : (_options_onShellError = options.onShellError) === null || _options_onShellError === void 0 ? void 0 : _options_onShellError.call(options, error);
-      });
-    }), _define_property(_obj, "onError", function onError(error) {
-      var _options_onError;
-      renderLevel = RenderLevel.CLIENT_RENDER;
-      options === null || options === void 0 ? void 0 : (_options_onError = options.onError) === null || _options_onError === void 0 ? void 0 : _options_onError.call(options, error);
-    }), _obj)).pipe;
+var createReadableStreamFromElement = function() {
+  var _ref = _async_to_generator(function(request, rootElement, options) {
+    var renderToPipeableStream, runtimeContext, htmlTemplate, config, ssrConfig, shellChunkStatus, renderLevel, forceStream2String, isbot, onReady, sheet, chunkVec, root;
+    return _ts_generator(this, function(_state) {
+      switch (_state.label) {
+        case 0:
+          return [
+            4,
+            import("react-dom/server")
+          ];
+        case 1:
+          renderToPipeableStream = _state.sent().renderToPipeableStream;
+          runtimeContext = options.runtimeContext, htmlTemplate = options.htmlTemplate, config = options.config, ssrConfig = options.ssrConfig;
+          shellChunkStatus = ShellChunkStatus.START;
+          renderLevel = RenderLevel.SERVER_RENDER;
+          forceStream2String = Boolean(process.env.MODERN_JS_STREAM_TO_STRING);
+          isbot = checkIsBot(request.headers.get("user-agent"));
+          onReady = isbot || forceStream2String ? "onAllReady" : "onShellReady";
+          sheet = new ServerStyleSheet();
+          chunkVec = [];
+          root = forceStream2String ? sheet.collectStyles(rootElement) : rootElement;
+          return [
+            2,
+            new Promise(function(resolve) {
+              var _obj;
+              var pipe = renderToPipeableStream(root, (_obj = {
+                nonce: config.nonce
+              }, _define_property(_obj, onReady, function() {
+                var _options_onReady;
+                var styledComponentsStyleTags = forceStream2String ? sheet.getStyleTags() : "";
+                (_options_onReady = options[onReady]) === null || _options_onReady === void 0 ? void 0 : _options_onReady.call(options);
+                getTemplates(htmlTemplate, {
+                  request,
+                  ssrConfig,
+                  renderLevel,
+                  runtimeContext,
+                  config,
+                  styledComponentsStyleTags
+                }).then(function(param) {
+                  var shellAfter = param.shellAfter, shellBefore = param.shellBefore;
+                  var body = new Transform({
+                    transform: function transform(chunk, _encoding, callback) {
+                      try {
+                        if (shellChunkStatus !== ShellChunkStatus.FINISH) {
+                          chunkVec.push(chunk.toString());
+                          var concatedChunk = chunkVec.join("");
+                          if (concatedChunk.includes(ESCAPED_SHELL_STREAM_END_MARK)) {
+                            concatedChunk = concatedChunk.replace(ESCAPED_SHELL_STREAM_END_MARK, "");
+                            shellChunkStatus = ShellChunkStatus.FINISH;
+                            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"));
+                        }
+                      }
+                    }
+                  });
+                  var stream = createReadableStreamFromReadable(body);
+                  resolve(stream);
+                  pipe(body);
+                });
+              }), _define_property(_obj, "onShellError", function onShellError(error) {
+                renderLevel = RenderLevel.CLIENT_RENDER;
+                getTemplates(htmlTemplate, {
+                  request,
+                  ssrConfig,
+                  renderLevel,
+                  runtimeContext,
+                  config
+                }).then(function(param) {
+                  var shellAfter = param.shellAfter, shellBefore = param.shellBefore;
+                  var _options_onShellError;
+                  var fallbackHtml = "".concat(shellBefore).concat(shellAfter);
+                  var readableStream = getReadableStreamFromString(fallbackHtml);
+                  resolve(readableStream);
+                  options === null || options === void 0 ? void 0 : (_options_onShellError = options.onShellError) === null || _options_onShellError === void 0 ? void 0 : _options_onShellError.call(options, error);
+                });
+              }), _define_property(_obj, "onError", function onError(error) {
+                var _options_onError;
+                renderLevel = RenderLevel.CLIENT_RENDER;
+                options === null || options === void 0 ? void 0 : (_options_onError = options.onError) === null || _options_onError === void 0 ? void 0 : _options_onError.call(options, error);
+              }), _obj)).pipe;
+            })
+          ];
+      }
+    });
   });
-};
+  return function createReadableStreamFromElement2(request, rootElement, options) {
+    return _ref.apply(this, arguments);
+  };
+}();
 export {
   createReadableStreamFromElement
 };

package/dist/esm/core/server/string/index.js

@@ -25,7 +25,7 @@ var renderString = function() {
       return [
         2,
         run(headersData, /* @__PURE__ */ _async_to_generator(function() {
-          var _runtimeContext_ssrContext, resource, runtimeContext, config, onError, onTiming, staticGenerate, tracer, routerContext, htmlTemplate, entryName, loadableStats, routeManifest, chunkSet, prefetchData, e, ssrConfig, collectors, rootElement, html;
+          var _runtimeContext_ssrContext, resource, runtimeContext, config, onError, onTiming, staticGenerate, tracer, routerContext, htmlTemplate, entryName, loadableStats, routeManifest, ssrConfig, chunkSet, prefetchData, e, collectors, rootElement, html;
           return _ts_generator(this, function(_state2) {
             switch (_state2.label) {
               case 0:
@@ -36,6 +36,7 @@ var renderString = function() {
                 };
                 routerContext = runtimeContext.routerContext;
                 htmlTemplate = resource.htmlTemplate, entryName = resource.entryName, loadableStats = resource.loadableStats, routeManifest = resource.routeManifest;
+                ssrConfig = getSSRConfigByEntry(entryName, config.ssr, config.ssrByEntries, staticGenerate);
                 chunkSet = {
                   renderLevel: RenderLevel.CLIENT_RENDER,
                   ssrScripts: "",
@@ -53,7 +54,7 @@ var renderString = function() {
                 ]);
                 return [
                   4,
-                  prefetch(serverRoot, request, options, tracer)
+                  prefetch(serverRoot, request, options, ssrConfig, tracer)
                 ];
               case 2:
                 prefetchData = _state2.sent();
@@ -70,7 +71,6 @@ var renderString = function() {
                   4
                 ];
               case 4:
-                ssrConfig = getSSRConfigByEntry(entryName, config.ssr, config.ssrByEntries, staticGenerate);
                 collectors = [
                   new StyledCollector(chunkSet),
                   new LoadableCollector({

package/dist/esm/core/server/string/loadable.js

@@ -243,7 +243,7 @@ var LoadableCollector = /* @__PURE__ */ function() {
             ];
           case 1:
             css = _state.sent();
-            chunkSet.jsChunk += css.filter(function(css2) {
+            chunkSet.cssChunk += css.filter(function(css2) {
               return Boolean(css2);
             }).join("");
             return [

package/dist/esm/core/server/string/prefetch.js

@@ -8,12 +8,12 @@ import { parseHeaders } from "@modern-js/runtime-utils/universal/request";
 import React from "react";
 import { SSRErrors, SSRTimings } from "../tracer";
 var prefetch = function() {
-  var _ref = _async_to_generator(function(App, request, options, param) {
-    var onError, onTiming, headersData, context, resource, config, entryName, loadableStats;
+  var _ref = _async_to_generator(function(App, request, options, ssrConfig, param) {
+    var onError, onTiming, headersData, context, resource, entryName, loadableStats;
     return _ts_generator(this, function(_state) {
       onError = param.onError, onTiming = param.onTiming;
       headersData = parseHeaders(request);
-      context = options.runtimeContext, resource = options.resource, config = options.config;
+      context = options.runtimeContext, resource = options.resource;
       entryName = resource.entryName, loadableStats = resource.loadableStats;
       return [
         2,
@@ -22,7 +22,7 @@ var prefetch = function() {
           return _ts_generator(this, function(_state2) {
             switch (_state2.label) {
               case 0:
-                if (!config.disablePrerender) {
+                if (typeof ssrConfig === "boolean" || !ssrConfig.disablePrerender) {
                   try {
                     end = time();
                     if (loadableStats) {
@@ -111,7 +111,7 @@ var prefetch = function() {
       ];
     });
   });
-  return function prefetch2(App, request, options, _) {
+  return function prefetch2(App, request, options, ssrConfig, _) {
     return _ref.apply(this, arguments);
   };
 }();

package/dist/esm/core/utils/merge.js

@@ -0,0 +1,32 @@
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
+function isObject(obj) {
+  return obj && typeof obj === "object" && !Array.isArray(obj);
+}
+function merge(target) {
+  for (var _len = arguments.length, sources = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    sources[_key - 1] = arguments[_key];
+  }
+  if (!sources.length) {
+    return target;
+  }
+  var source = sources.shift();
+  if (isObject(target) && isObject(source)) {
+    for (var key in source) {
+      if (isObject(source[key])) {
+        if (!target[key]) {
+          Object.assign(target, _define_property({}, key, {}));
+        }
+        merge(target[key], source[key]);
+      } else {
+        Object.assign(target, _define_property({}, key, source[key]));
+      }
+    }
+  }
+  return merge.apply(void 0, [
+    target
+  ].concat(_to_consumable_array(sources)));
+}
+export {
+  merge
+};

package/dist/esm/router/cli/code/index.js

@@ -16,18 +16,18 @@ var generateCode = function() {
     }
     function _generateEntryCode() {
       _generateEntryCode = _async_to_generator(function(entrypoint) {
-        var entryName, isMainEntry, isAutoMount, fileSystemRoutes, metaName, _config_output, initialRoutes, nestedRoutes, _iteratorNormalCompletion, _didIteratorError, _iteratorError, _iterator, _step, route, routes, _$config, ssr, useSSG, mode, hasPageRoute, code, _, _tmp, routesServerFile, code1, serverLoaderCombined, serverLoaderFile;
+        var entryName, isMainEntry, isAutoMount, pageRoutesEntry, nestedRoutesEntry, metaName, _config_output, initialRoutes, nestedRoutes, _iteratorNormalCompletion, _didIteratorError, _iteratorError, _iterator, _step, route, routes, _$config, ssr, useSSG, mode, hasPageRoute, code, _, _tmp, routesServerFile, code1, serverLoaderCombined, serverLoaderFile;
         return _ts_generator(this, function(_state) {
           switch (_state.label) {
             case 0:
-              entryName = entrypoint.entryName, isMainEntry = entrypoint.isMainEntry, isAutoMount = entrypoint.isAutoMount, fileSystemRoutes = entrypoint.fileSystemRoutes;
+              entryName = entrypoint.entryName, isMainEntry = entrypoint.isMainEntry, isAutoMount = entrypoint.isAutoMount, pageRoutesEntry = entrypoint.pageRoutesEntry, nestedRoutesEntry = entrypoint.nestedRoutesEntry;
               metaName = api.useAppContext().metaName;
               if (!isAutoMount)
                 return [
                   3,
                   11
                 ];
-              if (!fileSystemRoutes)
+              if (!(pageRoutesEntry || nestedRoutesEntry))
                 return [
                   3,
                   11

package/dist/esm/router/cli/entry.js

@@ -1,3 +1,5 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import path from "path";
 import { JS_EXTENSIONS, findExists, fs, isRouterV5 } from "@modern-js/utils";
 import { hasApp } from "../../cli/entry";
@@ -23,31 +25,31 @@ var modifyEntrypoints = function(entrypoints) {
     if (!entrypoint.isAutoMount) {
       return entrypoint;
     }
+    if (entrypoint === null || entrypoint === void 0 ? void 0 : entrypoint.isCustomSourceEntry) {
+      if (entrypoint.fileSystemRoutes) {
+        if (isRouterV5(config)) {
+          throw Error("Custom entries with conventional routing not support use react router v5!");
+        }
+        entrypoint.nestedRoutesEntry = entrypoint.entry;
+      }
+      return entrypoint;
+    }
     var isHasApp = hasApp(entrypoint.absoluteEntryDir);
     if (isHasApp) {
       return entrypoint;
     }
-    var isHasNestedRoutes = hasNestedRoutes(entrypoint.absoluteEntryDir);
     var isHasPages = hasPages(entrypoint.absoluteEntryDir);
-    if (!isHasNestedRoutes && !isHasPages && !entrypoint.fileSystemRoutes) {
-      return entrypoint;
-    }
-    if (entrypoint.fileSystemRoutes && !isRouterV5(config)) {
-      entrypoint.nestedRoutesEntry = entrypoint.entry;
-    } else if (!entrypoint.fileSystemRoutes) {
-      entrypoint.fileSystemRoutes = {
+    if (isHasPages) {
+      entrypoint.pageRoutesEntry = path.join(entrypoint.absoluteEntryDir, PAGES_DIR_NAME);
+      entrypoint.fileSystemRoutes = _object_spread_props(_object_spread({}, entrypoint.fileSystemRoutes), {
         globalApp: findExists(JS_EXTENSIONS.map(function(ext) {
           return path.resolve(entrypoint.absoluteEntryDir, "./".concat(PAGES_DIR_NAME, "/").concat(FILE_SYSTEM_ROUTES_GLOBAL_LAYOUT).concat(ext));
         }))
-      };
-      if (isHasPages) {
-        entrypoint.pageRoutesEntry = path.join(entrypoint.absoluteEntryDir, PAGES_DIR_NAME);
-      }
-      if (isHasNestedRoutes) {
-        entrypoint.nestedRoutesEntry = path.join(entrypoint.absoluteEntryDir, NESTED_ROUTES_DIR);
-      }
-    } else {
-      throw Error("Custom entries with conventional routing not support use react router v5!");
+      });
+    }
+    var isHasNestedRoutes = hasNestedRoutes(entrypoint.absoluteEntryDir);
+    if (isHasNestedRoutes) {
+      entrypoint.nestedRoutesEntry = path.join(entrypoint.absoluteEntryDir, NESTED_ROUTES_DIR);
     }
     return entrypoint;
   });

package/dist/esm/router/runtime/PrefetchLink.js

@@ -98,7 +98,7 @@ function _loadRouteModule() {
           return [
             4,
             Promise.all(chunkIds.map(function(chunkId) {
-              return __webpack_chunk_load__ === null || __webpack_chunk_load__ === void 0 ? void 0 : __webpack_chunk_load__(String(chunkId));
+              return __webpack_chunk_load__ === null || __webpack_chunk_load__ === void 0 ? void 0 : __webpack_chunk_load__(chunkId);
             }))
           ];
         case 2:

package/dist/esm/router/runtime/plugin.node.js

@@ -2,7 +2,6 @@ import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
 import { _ as _instanceof } from "@swc/helpers/_/_instanceof";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
-import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useContext } from "react";
@@ -18,54 +17,15 @@ import { getGlobalLayoutApp, getGlobalRoutes } from "../../core/context";
 import { renderRoutes, urlJoin } from "./utils";
 import { modifyRoutes as modifyRoutesHook } from "./hooks";
 import DeferredDataScripts from "./DeferredDataScripts.node";
-function createFetchHeaders(requestHeaders) {
-  var headers = new Headers();
-  var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
-  try {
-    for (var _iterator = Object.entries(requestHeaders || {})[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-      var _step_value = _sliced_to_array(_step.value, 2), key = _step_value[0], values = _step_value[1];
-      if (values) {
-        if (Array.isArray(values)) {
-          var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = void 0;
-          try {
-            for (var _iterator1 = values[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
-              var value = _step1.value;
-              headers.append(key, value);
-            }
-          } catch (err) {
-            _didIteratorError1 = true;
-            _iteratorError1 = err;
-          } finally {
-            try {
-              if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
-                _iterator1.return();
-              }
-            } finally {
-              if (_didIteratorError1) {
-                throw _iteratorError1;
-              }
-            }
-          }
-        } else {
-          headers.set(key, values);
-        }
-      }
-    }
-  } catch (err) {
-    _didIteratorError = true;
-    _iteratorError = err;
-  } finally {
-    try {
-      if (!_iteratorNormalCompletion && _iterator.return != null) {
-        _iterator.return();
-      }
-    } finally {
-      if (_didIteratorError) {
-        throw _iteratorError;
-      }
-    }
-  }
-  return headers;
+function createRemixReuqest(request) {
+  var method = "GET";
+  var headers = request.headers;
+  var controller = new AbortController();
+  return new Request(request.url, {
+    method,
+    headers,
+    signal: controller.signal
+  });
 }
 var routerPlugin = function(param) {
   var _param_basename = param.basename, basename = _param_basename === void 0 ? "" : _param_basename, routesConfig = param.routesConfig, createRoutes = param.createRoutes;
@@ -114,7 +74,7 @@ var routerPlugin = function(param) {
                   query = createStaticHandler(routes, {
                     basename: _basename
                   }).query;
-                  remixRequest = context.ssrContext.request.raw;
+                  remixRequest = createRemixReuqest(context.ssrContext.request.raw);
                   end = time();
                   return [
                     4,
@@ -213,7 +173,6 @@ var routerPlugin = function(param) {
 var modifyRoutes = function() {
 };
 export {
-  createFetchHeaders,
   modifyRoutes,
   routerPlugin
 };

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

@@ -1,6 +1,5 @@
 import path from "path";
 import { isReact18 as checkIsReact18, cleanRequireCache, createRuntimeExportsUtils } from "@modern-js/utils";
-import { rspack } from "@rsbuild/core";
 import { statePlugin } from "../state/cli";
 import { routerPlugin } from "../router/cli";
 import { documentPlugin } from "../document/cli";
@@ -112,7 +111,7 @@ const runtimePlugin = (params) => ({
                 ]);
               }
             },
-            rspack: (_config, { appendPlugins }) => {
+            rspack: (_config, { appendPlugins, rspack }) => {
               if (!isReact18) {
                 appendPlugins([
                   new rspack.IgnorePlugin({

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

@@ -19,6 +19,33 @@ const checkUseStringSSR = (config) => {
   const { output } = config;
   return Boolean(output === null || output === void 0 ? void 0 : output.ssg) || hasStringSSREntry(config);
 };
+const ssrBuilderPlugin = (modernAPI) => ({
+  name: "@modern-js/builder-plugin-ssr",
+  setup(api) {
+    api.modifyEnvironmentConfig((config, { name, mergeEnvironmentConfig }) => {
+      const isServerEnvironment = config.output.target === "node" || name === "serviceWorker";
+      const userConfig = modernAPI.useResolvedConfigContext();
+      const useLoadablePlugin = isUseSSRBundle(userConfig) && !isServerEnvironment && checkUseStringSSR(userConfig);
+      return mergeEnvironmentConfig(config, {
+        source: {
+          define: {
+            "process.env.MODERN_TARGET": isServerEnvironment ? JSON.stringify("node") : JSON.stringify("browser")
+          }
+        },
+        tools: {
+          bundlerChain: useLoadablePlugin ? (chain) => {
+            const LoadableBundlerPlugin = require("./loadable-bundler-plugin.js");
+            chain.plugin("loadable").use(LoadableBundlerPlugin, [
+              {
+                filename: LOADABLE_STATS_FILE
+              }
+            ]);
+          } : void 0
+        }
+      });
+    });
+  }
+});
 const ssrPlugin = () => ({
   name: "@modern-js/plugin-ssr",
   required: [
@@ -52,27 +79,16 @@ const ssrPlugin = () => ({
           }
         })();
         return {
+          builderPlugins: [
+            ssrBuilderPlugin(api)
+          ],
           source: {
             alias: {
               // ensure that all packages use the same storage in @modern-js/runtime-utils/node
               "@modern-js/runtime-utils/node$": require.resolve("@modern-js/runtime-utils/node")
-            },
-            globalVars: (values, { target }) => {
-              values["process.env.MODERN_TARGET"] = target === "node" || target === "service-worker" ? "node" : "browser";
             }
           },
           tools: {
-            bundlerChain(chain, { isServer, isServiceWorker }) {
-              const userConfig = api.useResolvedConfigContext();
-              if (isUseSSRBundle(userConfig) && !isServer && !isServiceWorker && checkUseStringSSR(userConfig)) {
-                const LoadableBundlerPlugin = require("./loadable-bundler-plugin.js");
-                chain.plugin("loadable").use(LoadableBundlerPlugin, [
-                  {
-                    filename: LOADABLE_STATS_FILE
-                  }
-                ]);
-              }
-            },
             babel: babelHandler
           }
         };

package/dist/esm-node/core/browser/index.js

@@ -1,10 +1,30 @@
 import React from "react";
+import cookieTool from "cookie";
 import { getGlobalAppInit } from "../context";
 import { getInitialContext } from "../context/runtime";
 import { createLoaderManager } from "../loader/loaderManager";
 import { getGlobalRunner } from "../plugin/runner";
 import { hydrateRoot } from "./hydrate";
 const IS_REACT18 = process.env.IS_REACT18 === "true";
+function getSSRData() {
+  const ssrData = window._SSR_DATA;
+  if (ssrData) {
+    const finalSSRData = {
+      ...ssrData,
+      context: {
+        ...ssrData.context,
+        request: {
+          ...ssrData.context.request,
+          cookieMap: cookieTool.parse(document.cookie || "") || {},
+          cookie: document.cookie || "",
+          userAgent: navigator.userAgent,
+          referer: document.referrer
+        }
+      }
+    };
+    return finalSSRData;
+  }
+}
 function isClientArgs(id) {
   return typeof id === "undefined" || typeof id === "string" || typeof HTMLElement !== "undefined" && id instanceof HTMLElement;
 }
@@ -21,7 +41,7 @@ async function render(App, id) {
   });
   if (isClientArgs(id)) {
     var _ssrData_data, _ssrData_data1;
-    const ssrData = window._SSR_DATA;
+    const ssrData = getSSRData();
     const loadersData = (ssrData === null || ssrData === void 0 ? void 0 : (_ssrData_data = ssrData.data) === null || _ssrData_data === void 0 ? void 0 : _ssrData_data.loadersData) || {};
     const initialLoadersState = Object.keys(loadersData).reduce((res, key) => {
       const loaderData = loadersData[key];

package/dist/esm-node/core/plugin/index.js

@@ -1,4 +1,4 @@
-import { merge } from "@modern-js/utils/lodash";
+import { merge } from "../utils/merge";
 import { runtime } from "./base";
 import { setGlobalRunner } from "./runner";
 export * from "./base";

package/dist/esm-node/core/server/stream/createReadableStream.js

@@ -1,5 +1,4 @@
 import { Transform } from "stream";
-import { renderToPipeableStream } from "react-dom/server";
 import { createReadableStreamFromReadable } from "@modern-js/runtime-utils/node";
 import { ServerStyleSheet } from "styled-components";
 import checkIsBot from "isbot";
@@ -7,7 +6,8 @@ import { ESCAPED_SHELL_STREAM_END_MARK } from "../../../common";
 import { RenderLevel } from "../../constants";
 import { getTemplates } from "./template";
 import { ShellChunkStatus, getReadableStreamFromString } from "./shared";
-const createReadableStreamFromElement = (request, rootElement, options) => {
+const createReadableStreamFromElement = async (request, rootElement, options) => {
+  const { renderToPipeableStream } = await import("react-dom/server");
   const { runtimeContext, htmlTemplate, config, ssrConfig } = options;
   let shellChunkStatus = ShellChunkStatus.START;
   let renderLevel = RenderLevel.SERVER_RENDER;

package/dist/esm-node/core/server/string/index.js

@@ -25,6 +25,7 @@ const renderString = async (request, serverRoot, options) => {
     };
     const routerContext = runtimeContext.routerContext;
     const { htmlTemplate, entryName, loadableStats, routeManifest } = resource;
+    const ssrConfig = getSSRConfigByEntry(entryName, config.ssr, config.ssrByEntries, staticGenerate);
     const chunkSet = {
       renderLevel: RenderLevel.CLIENT_RENDER,
       ssrScripts: "",
@@ -33,12 +34,11 @@ const renderString = async (request, serverRoot, options) => {
     };
     let prefetchData = {};
     try {
-      prefetchData = await prefetch(serverRoot, request, options, tracer);
+      prefetchData = await prefetch(serverRoot, request, options, ssrConfig, tracer);
       chunkSet.renderLevel = RenderLevel.SERVER_PREFETCH;
     } catch (e) {
       chunkSet.renderLevel = RenderLevel.CLIENT_RENDER;
     }
-    const ssrConfig = getSSRConfigByEntry(entryName, config.ssr, config.ssrByEntries, staticGenerate);
     const collectors = [
       new StyledCollector(chunkSet),
       new LoadableCollector({